无法使 CORS 请求正常工作答案

【问题标题】：Can't manage to make CORS request working无法使 CORS 请求正常工作
【发布时间】：2015-09-16 03:59:39
【问题描述】：

我正在尝试从不同域的 Web 服务获取一些数据，但遇到了一些 CORS 问题。

我的控制器中有这样的东西：

$http({method: 'GET', url : 'http://somewebserviceapi.com?idAppli=' + appId, headers: {'Authorization': 'Basic dXNlcm5hbWU6cGFzc3dvcmQ='}}).
        success(function(data, status, headers, config) {
            console.log(data);
        }).
        error(function() {
            console.log("An error occured");
        });

我收到以下错误：

选项 http://somewebserviceapi.com?idLangue=1&idAppli=2153 b @ angular.js:9866n @ angular.js:9667$get.f @ angular.js:9383(匿名函数) @ angular.js:13248$get.n.$eval @ angular. js:14466$get.n.$digest @ angular.js:14282$get.n.$apply @ angular.js:14571showApplication @ viewerController.js:825handleApplications @ svgManipulation.js:15SvgPanZoom.handleMouseUp @ svg-pan-zoom。 js:1195SvgPanZoom.setupHandlers.eventListeners.mouseup@svg-pan-zoom.js:829

和

XMLHttpRequest 无法加载 http://somewebserviceapi.com?idLangue=1&idAppli=2153 。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:63342' 不允许访问。响应的 HTTP 状态代码为 401。

现在是标题：

当它被我的控制器调用时：（似乎没有进行身份验证）

（响应）

Connection: Keep-Alive
Content-Length: 0
Date: Mon, 29 Jun 2015 14:33:09 GMT
Keep-Alive: timeout=5, max=100
Server: Apache
WWW-Authenticate: Negotiate
                  Basic realm="AD-ITS.SOME-COMPANY.COM"

（请求）

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Access-Control-Request-Headers: authorization
Access-Control-Request-Methods: GET
Connection: keep-alive
Host: somewebserviceapi.com
Origin: http://localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0

当我自己去网址时：

（响应）

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Origin, Accept, Authorization
Access-Control-Allow-Methods: GET, POST, DELETE, PUT
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Length: 394
Content-Type: application/json;charset=UTF-8
Date: Mon, 29 Jun 2015 15:21:08 GMT
Keep-Alive: timeout=5, max=99
Server: Apache

（请求）

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Connection: keep-alive
Cookie: JSESSIONID=89C1EC542BCBC42421C6207767EF8FA1
Host:  http://somewebserviceapi.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0

在 Chrome 上，除了响应和请求标头之外，还有一个可见的通用标头：在这个标题中，我有：

来自我的控制器请求：Request Method:OPTIONS

当我自己访问 URL 时：Request Method:GET

显然，OPTIONS 方法是 CORS 处理某些事情的方式，但我需要在某处添加 OPTIONS 方法吗？

服务器端，我确实有Access-Control-Allow-Origin: * 行，所以我不知道如何解决这个问题。

【问题讨论】：

使用项目目录中的python -m SimpleHTTPServer 从命令行启动服务器。或者只是在 Stack Overflow 上找到任何一个答案......似乎每天都会问同样的问题。
很遗憾，我手头没有服务器，我要求添加CORS支持，已经添加了，但可能还缺少一些东西。
使用此命令启动 your 应用程序。您正在 ping 的服务器正在做正确的事情。
好吧，我不熟悉 Python，我什至没有安装它（顺便说一句，我在 Windows 上）。但是我也尝试使用http-server -a localhost 在http-server 上运行该应用程序并通过http://localhost:8080/ 访问它，我有同样的错误，使用的方法仍然是OPTIONS

标签： javascript html ajax angularjs cors

【解决方案1】：

这是典型的 CORS 问题，当您从 JS 进行调用并应用 CORS 逻辑时，将进行的第一个调用是 OPTIONS 应该返回

200 OK 响应为空（不确定它是否真的必须为空）

和标题：

Access-Control-Allow-Methods: GET, POST, DELETE, PUT Access-Control-Allow-Origin: *

当OPTIONS 正确配置后，如果可以在Access-Control-Allow-Methods: GET, POST, DELETE, PUT 中找到该方法，则会进行另一个调用

虽然OPTIONS必须添加到Access-Control-Allow-Methods

【讨论】：

OPTIONS 应该如何配置？如果我将OPTIONS 添加到Access-Control-Allow-Methods，将使用正确的GET 方法进行第二次调用，是吗？
正确，OPTIONS 可以确认可以使用哪些方法，即您只希望在某些 api 端点上使用 DELETE 方法，然后任何其他尝试都将失败。因此，只需将OPTIONS 添加到允许的方法并配置服务器以使用success 响应这些调用

【解决方案2】：

这似乎与预检请求（OPTIONS 请求）有关。请看一下这个SO问题Why does the preflight OPTIONS request of an authenticated CORS request work in Chrome but not Firefox?：

如何让 OPTIONS 请求以一致的方式发送和响应？

只需让服务器（本例中为 API）响应 OPTIONS 无需身份验证即可请求。

Kinvey 在扩展这方面做得很好，同时也链接到了一个问题 Twitter API 概述了这个确切的 catch-22 问题有趣的是，在任何浏览器问题出现前几周已归档。

看看它是否适合你。（另外，由于这似乎也是与浏览器相关的问题，请检查不同的浏览器，看看会发生什么）

【讨论】：