AngularJS - 仅使用 HTTP GET 的 CORS 错误答案

【问题标题】：AngularJS - CORS Error only with HTTP GETAngularJS - 仅使用 HTTP GET 的 CORS 错误
【发布时间】：2017-11-30 17:34:12
【问题描述】：

我正在尝试从 AngularJS 发出 http 获取请求。它只在 Internet Explorer 11 中工作。当我尝试在 Chrome、Firefox 或 Edge 中进行 POST 调用时，它不起作用。

我收到以下错误：

CORS Error in Chrome

这是我的 AngularJS 调用：

 $http({
              method: 'POST',
               headers: {
                'Content-Type': 'application/json'
              },
              url: URL
              }).then(function successCallback(response) {
                  console.log(response.data);

              }, function errorCallback(response) {
                console.log(response.status);
                console.log(response.headers);
                console.log(response.config);
              });

作为后端，我有一个 Java Spring MVC 应用程序，并设置了以下标头：

    HttpHeaders responseHeader = new HttpHeaders();
    responseHeader.set("Access-Control-Allow-Origin","*");
    responseHeader.set("Access-Control-Allow-Headers:","Content-Type");
    responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
    responseHeader.set("Content-Type","application/json");

但是当我设置断点时，我看到 angular 永远不会到达后端！这很令人困惑，我已经在互联网上搜索了很多并尝试更改默认的 AngularJS Content-Type 标头：

$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';

我还尝试将 POST-Request 中的 Content-Type 更改为“application/x-www-form-urlencoded” - 无效。

注意：后端和前端在同一台开发机器上运行。唯一的区别是端口，这就是为什么我对我得到一个 CORS 错误感到困惑......

我只有 POST-Requests 才有这个问题； GET 像 Charm 一样工作

编辑 1：

我认为这是 cors 的问题，并且我使用不同的端口，但是我可以将其关闭吗？

编辑 2：

现在我尝试让它与本地 tomcat 一起工作。现在我在 Tomcat 中看到请求将到达服务器：

<< Client IP>> - - [28/Jun/2017:13:43:24 +0200] "OPTIONS <<URL>> HTTP/1.1" 403 -

响应现在是 HTTP 403。在浏览器网络选项卡中，我可以看到以下请求标头：

  Host: <<backend ip>>:8080
User-Agent: <<user agent>>
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: access-control-allow-origin,content-type
Origin: http://<<Ip of host>>
Connection: keep-alive

该请求标头的响应如下：

Content-Type: text/plain
Content-Length: 0
Date: Wed, 28 Jun 2017 11:43:24 GMT

我已经像 tomcat 文档中的示例一样设置了 cors 过滤器：http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

当我发出 get 请求时，它仍在工作并且所有 CORS 标头都存在。我认为第一个 OPTIONS 请求有问题。不知道为什么tomcat在OPTIONS请求来的时候没有设置CORS头。

【问题讨论】：

stackoverflow.com/questions/1077218/…
会不会和this有关？如果 Angular 正在添加它们，您可能需要在 Access-Control-Allow-Headers 中添加更多内容。检查请求并准确查看发送了哪些标头。
如果端口不同，则违反浏览器同源策略...
en.wikipedia.org/wiki/Same-origin_policy
不同的端口是什么问题？这意味着前端和后端必须在同一个端口上运行？

标签： javascript java angularjs google-chrome http

【解决方案1】：

在你的 Spring Controller 中，添加 @CrossOrigin('http://localhost:8080')

注解。当然，替换掉 Angular 应用程序的端口。

【讨论】：

【解决方案2】：

由于您收到 400（未授权）错误，因此请求未到达服务本身。很可能请求域被阻止，您可以查看是否允许 XHR 请求并在需要时检查跨源策略。

【讨论】：

【解决方案3】：

我想通了。我制作了一个全新的 angularjs 测试网站。这是我的工作 angularjs 代码：

 var req = {
 method: 'POST',
 url: 'myURL',
 headers: {
   'Content-Type': undefined
 },
 data: "JSON BODY DATA"
}

$http(req).then(function successCallback(response) {
    console.log(response.data);
  }, function errorCallback(response) {
    console.log(response.data);
  });
}]);

我删除了任何更改默认 angularjs 标头的内容。我的 Spring MVC 应用程序的标题如下：

HttpHeaders responseHeader = new HttpHeaders();
responseHeader.set("Access-Control-Allow-Origin","http://<<clientip>>");
responseHeader.set("Access-Control-Allow-Headers:","Content-Type");
responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
responseHeader.set("Content-Type","application/json");

我不知道它现在工作的确切原因。也许是因为我修改了 AngularJS 中的默认标题。

【讨论】：