我在angularjs中缺少CORS标题'Access-Control-Allow-Origin'

Question

我收到CORS标头丢失错误。我无法修改后端Web服务的代码，我只能更改客户端应用程序。

我可以添加＆＃34; Allow control allow origin＆＃34;在谷歌浏览器上添加插件但我不想在所有客户端上安装添加以访问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

作为评论中的mentioned，您必须使用代理或某种代理。没有办法解决这个问题。

但是，它非常简单：使服务于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)