我在angularjs中缺少CORS標題'Access-Control-Allow-Origin'

Question

我收到一個CORS標頭丟失錯誤。 我無法修改后端Web服務的代碼，我只能更改客戶端應用程序。

我可以在谷歌瀏覽器上添加“ Allow control allow origin ”插件，但我不想在所有客戶端上安裝添加以訪問API。 如何更改我的AngularJS代碼以便我不會遇到此問題？

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    $http.get('url', {
        headers: { 'Authorization': 'Basic a2VybmVsc3B==' }
    })
        .then(function (response) {
            $scope.names = response.data;
        });
});
</script>

Answer 1

正如所提到的意見，你將不得不使用代理，或某種代理。 沒有辦法解決這個問題。

但是，它非常簡單： 使為angularjs應用程序服務的服務器執行api調用。

首先，您必須了解服務器和客戶端是什么。 然后，你需要了解你的應用程序angularjs從服務器提供服務 。 您的angularjs應用程序可以向該服務器發出http請求，然后該服務器將調用api，並將結果返回給客戶端：

我有點假設Node服務器正在為您的angularjs應用程序服務，但是任何服務器都可以這樣做，它將能夠發出http請求而不是跨源請求。

---

在您的情況下，當您進行url調用時，請調用服務於您的應用程序的服務器，然后從該服務器創建一個將調用外部API的服務。

Answer 2

我有同樣的錯誤。 前面的Angular請求后端。 Nginx是代理。 所以我把這行添加到我的nginx配置中

location /database/ {
        add_header Access-Control-Allow-Origin *;
        <other_lines>
}

這解決了我的CORS問題。

Answer 3

如果您使用的是IIS Web服務器，請將以下配置添加到您的web.config文件中。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

如果你沒有訪問后端使用$http.jsonp(url)而不是$http.get(url)