我得到 angularjs 中缺少 CORS 标头“Access-Control-Allow-Origin”答案

【问题标题】：im getting CORS header ‘Access-Control-Allow-Origin’ missing in angularjs我得到 angularjs 中缺少 CORS 标头“Access-Control-Allow-Origin”
【发布时间】：2017-05-16 07:15:39
【问题描述】：

我收到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>

【问题讨论】：

您的服务器应该发送该标头来告知允许的来源。
因为你有不同的API服务器，所以你可以在你的后端服务器中添加header "Access-Control-Allow-Origin", "*"。
我可以通过在 google chrome 中添加插件来解决这个问题，然后我不能在前端应用程序中为 cors 标头丢失编写代码
您可以做到这一点的唯一方法是使用代理。 所有使用 jsonp 的建议都不起作用，因为 jsonp 不支持标头
您控制的服务器上的服务器端脚本，它向远程 api 或第三方服务发出 cURL 请求。进行网络搜索

标签： javascript angularjs cors

【解决方案1】：

如果您使用 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)

【讨论】：

OP 明确表示他们没有后端访问权限。这有什么帮助？

【解决方案2】：

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

不过，这相当简单：让服务于 angularjs 应用程序的服务器执行 api 调用。

首先，您必须了解什么是服务器和客户端。之后，您需要了解您的 angularjs 应用程序是从服务器服务。您的 angularjs 应用程序可以向该服务器发出 http 请求，然后该服务器将调用 api，并将结果返回给客户端：

我有点假设 Node 服务器正在为您的 angularjs 应用程序提供服务，但任何服务器都可以这样做，它能够发出 http 请求而不是跨源请求。

在您的情况下，当您调用 url 时，改为调用为您的应用程序提供服务的服务器，然后从该服务器创建一个将调用外部 api 的服务。

【讨论】：

终于有个理智的答案了！
值得一提的是还有第三方代理服务。我个人不喜欢使用无名的，但该选项确实存在
好点。但是我很少（从不）使用这些，因此我有点犹豫要解释一下。如果我觉得我可以添加一些有价值的东西会更新
我使用了雅虎支持的几种不同的方法。一个死了，被称为管道，非常酷。另一个 YQL 还活着，可以做很多不同的事情..xml to json, html scraper, 几个中的直接 json 检索

【解决方案3】：

我有同样的错误。前端的 Angular 向后端发出请求。 Nginx 是代理。所以我将此行添加到我的 nginx 配置中

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

这解决了我的 CORS 问题。

【讨论】：