javascript - 跨域 REST POST 进行预检但不跟进

Question

我是网络编程的新手，所以请多多包涵。我在 python flask 中创建了一个简单的 REST API，并使用 Apache 2.4 托管它。我已经通过 cURL 对其进行了测试并且它有效。现在，我正尝试使用 jQuery 通过 Web 界面访问它。

REST API 位于 http://api.localhost访问它的网站位于 http://localhost .

我用来尝试执行 POST 的代码如下所示:

    $.ajax({
        type: 'POST',
        url: 'http://api.localhost/auth',
        data: '{"username":"user1", "password":"abcxyz"}',
        success: function(data) { console.log(data); alert('data: ' + data);  },
        contentType: "application/json",
        dataType: 'json'
    });

但是，成功函数似乎没有运行。在开发控制台 (f12) 中查看，我可以看到不是向该 URL 发送 POST，而是发出了 OPTIONS HTTP 请求。我的理解是这是跨源资源共享 (CORS) 预检检查，以确保本地主机可以访问 api.localhost。

我已将以下行添加到 api.localhost 的 apache 配置中:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"

它似乎正在工作，因为 OPTIONS 请求返回 200(没有其他数据)。但是，没有后续行动。我的理解是，因为服务器说任何人都可以 POST 到 api.localhost，所以它应该继续执行下一步的 POST，但事实并非如此。

以下是预检检查请求 header :

Host: api.localhost
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101
Firefox/52.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost
Connection: keep-alive
Cache-Control: max-age=0

以下是同一请求的响应 header (记住，状态 200):

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Allow: POST, OPTIONS
Connection: Keep-Alive
Content-Encoding: gzip
Content-Length: 20
Content-Type: text/html; charset=utf-8
Date: Thu, 07 Dec 2017 00:17:08 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.29 (Debian)
Vary: Accept-Encoding

您可以看到服务器说任何域都可以 (*) 并且 POST 是可以的。但是，没有后续的 POST。我错过了什么？

谢谢。

Answer 1

http://api.localhost/auth 还必须发送 Access-Control-Allow-Headers: content-type。

因此，在您的 Apache 配置中，您还需要添加以下内容:

Header always set Access-Control-Allow-Headers "content-type"

这是必要的，因为前端代码的 contentType: "application/json" 部分向请求添加了一个 Content-Type: application/json header ，以及任何值对于 Content-Type 请求 header ，而不是 text/plain、application/x-www-form-urlencoded 或 multipart/form-data 将触发浏览器发送 CORS 预检 OPTIONS 请求。

因此，如果您的 http://api.localhost/auth 服务器发回 Access-Control-Allow-Headers: content-type 响应 header ，那么应该会导致预检成功，从而导致浏览器继续从您的前端代码发出 POST 请求。