AngularJS应用程序中的CORS错误答案

【问题标题】：CORS error in AngularJS appAngularJS应用程序中的CORS错误
【发布时间】：2016-08-15 18:51:03
【问题描述】：

当我尝试从本地应用程序发出 POST 请求时出现以下错误：

XMLHttpRequest cannot load https://www.xxx..yy/json/orders. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:9000', but only one is allowed. Origin 'http://localhost:9000' is therefore not allowed access.

这是我的应用程序结构简介：

ctrl:
.controller('myCtrl', function ($scope,$http) {
      var urlBase = "https://xxx/json/";
      console.log("Hello...");
                 
      $scope.startDirectTransaction = function() {
        console.log("startDirectTransaction form...");
        
       $http({method: 'POST', url: urlBase + 'orders', headers: {
            'api_key': 'xxx'}
        }).then(function(response){ 
              $scope.related = response.data;
              console.log("Success!"); 
            });

      };
app:

<!-- begin snippet: js hide: false -->

【问题讨论】：

你是否在你的 chrome 中安装了 CROS 扩展
您是否在服务器端代码上设置了 CORS 标头？进行跨域请求时出现 CORS 错误，我只看到 localhost？
你的服务器 IP 必须是 whitelisted by xxx
见stackoverflow.com/questions/22343384/…
我无法控制服务器端代码。所以需要一个解决方法。

标签： javascript angularjs https http-headers cors

【解决方案1】：

您正在尝试将本地应用程序中的数据发布到不同的域。一般来说，这违反了 CORS 政策。

此问题的解决方案是您尝试发布数据的域应该通过 Access-Control-Allow-Origin 允许

在https://en.wikipedia.org/wiki/Cross-origin_resource_sharing了解更多关于 CORS 的信息

【讨论】：

我无法控制服务器端代码。所以需要一个解决方法。
即使启用了 Access-Control-Allow-Origin，因为它是一个 POST 请求，内容类型也会从 application/json 转换为纯文本。我遇到了这些问题，对我有用的解决方法是创建我自己的 api 来转发这个请求。我认为没有办法通过浏览器来克服它，因为 CORS 策略是特定于浏览器的。