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

Posted 2023-03-04

【中文标题】我得到 angularjs 中缺少 CORS 标头“Access-Control-Allow-Origin”

【英文标题】：im getting CORS header ‘Access-Control-Allow-Origin’ missing in angularjs

【发布时间】：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 请求。进行网络搜索

【参考方案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 问题。