sorry, I am new to Umbraco and get to upgrade existing web app to 8.17.1 from 8.6.4, all seems working fine, except at plugin where code is written in html and .js using angular JS.

earlier there is no any issues to call API, but after upgradation, we are getting CORS error while calling API.

I have compared older and newer version project, and seems any thing not worked out after trying various options.

below are the JS file code.

angular.module("umbraco") .controller("WG.BibleVerseSelectorController", function ($scope, $http, notificationsService) { const getBibleUrl = (responseType) => https://api.esv.org/v3/passage/${responseType}?q=; const apiKey = "*************"; const authToken = Token ${apiKey}; $scope.verseBloks = [] $scope.books = ["Genesis", "Exodus", "Leviticus", "Numbers", "Deuteronomy", "Joshua", "Judges", "Ruth", "1 Samuel", "2 Samuel", "1 Kings", "2 Kings", "1 Chronicles", "2 Chronicles", "Ezra", "Nehemiah", "Esther", "Job", "Psalms", "Proverbs", "Ecclesiastes", "Song of Solomon", "Isaiah", "Jeremiah", "Lamentations", "Ezekiel", "Daniel", "Hosea", "Joel", "Amos", "Obadiah", "Jonah", "Micah", "Nahum", "Habakkuk", "Zephaniah", "Haggai", "Zechariah", "Malachi", "Matthew", "Mark", "Luke", "John", "Acts", "Romans", "1 Corinthians", "2 Corinthians", "Galatians", "Ephesians", "Philippians", "Colossians", "1 Thessalonians", "2 Thessalonians", "1 Timothy", "2 Timothy", "Titus", "Philemon", "Hebrews", "James", "1 Peter", "2 Peter", "1 John", "2 John", "3 John", "Jude", "Revelation"];

        const getDefaultBlock = function (verseContent, sortOrder = 0, selectedBook = "-1", verseQuery = "", responseType = "text") {
            return {
                selectedBook: selectedBook,
                sortOrder: sortOrder,
                verseQuery: verseQuery,
                verseContent: verseContent,
                isLoading: false,
                responseType: responseType,

                booksChange() {
                    this.verseQuery = "";
                },

                getVersesContent(index) {
                    if (this.selectedBook && this.selectedBook !== "-1" && this.verseQuery) {
                        this.isLoading = true;
                        debugger;
                        $http({
                            method: "GET",
                            url: getBibleUrl(this.responseType) + this.selectedBook + this.verseQuery,
                            headers: {
                                "Authorization": authToken
                            }
                        }).then((response) => {
                            console.log(response);
                            var splitter = this.responseType === "text" ? "<br/><br/>" : "";
                            this.verseContent = response.data.passages.join(splitter);

                            if (!$scope.model.value) {
                                $scope.model.value = [];
                            }
                            const matched = $scope.model.value[index];
                            if (matched) {
                                matched.selectedBook = this.selectedBook;
                                matched.sortOrder = this.sortOrder;
                                matched.verseContent = this.verseContent;
                                matched.verseQuery = this.verseQuery;
                                matched.responseType = this.responseType
                            } else {
                                this.saveToModelValue();
                            }
                            this.isLoading = false;
                        }, (err) => {
                            console.error(err);
                            notificationsService.error("Error, unable to retrieve data", err);
                        });
                    }
                },

                saveToModelValue() {
                    $scope.model.value.push({
                        selectedBook: this.selectedBook,
                        sortOrder: this.sortOrder,
                        verseContent: this.verseContent,
                        verseQuery: this.verseQuery,
                        responseType: this.responseType
                    });
                },

                sortOrderChange(index) {
                    const matched = $scope.model.value[index];
                    if (matched) {
                        matched.sortOrder = this.sortOrder
                    }
                },

                handleEnter(event, index) {
                    if (event.key === "Enter" && event.keyCode === 13) {
                        this.getVersesContent(index);
                    }
                    event.stopPropagation();
                    event.preventDefault();
                }
            }
        }

        this.init = function () {
            if (!$scope.model.value) {
                $scope.verseBloks.push(getDefaultBlock());
            } else {
                if (!Array.isArray($scope.model.value)) {
                    console.log("Wrong value " + $scope.model.value);
                } else {
                    $scope.model.value.forEach(x => {
                        $scope.verseBloks.push(getDefaultBlock(x.verseContent, x.sortOrder, x.selectedBook, x.verseQuery, x.responseType));
                    });
                }
            }
        }();

        $scope.addNewBlock = function () {
            $scope.verseBloks.push(getDefaultBlock());
        }

        $scope.removeBlock = function (e, block, index) {
            e.preventDefault();
            if (index == 0) {
                $scope.verseBloks[0] = getDefaultBlock();
            } else {
                $scope.verseBloks = $scope.verseBloks.filter(x => x !== block);
            }
            if ($scope.model.value) {
                $scope.model.value = $scope.model.value.filter(x => x.verseContent !== block.verseContent);
            }
        }
    });

below are the html code