跨域 REST POST 进行预检但没有跟进

Question

我是网络编程的新手，所以请耐心等待。我在 python 烧瓶中创建了一个简单的 REST API，并使用 Apache 2.4 托管它。我已经通过 cURL 对其进行了测试，并且可以正常工作。现在我正在尝试通过带有 jQ​​uery 的 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) 预检检查，以确保 localhost 可以访问 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，所以它应该继续执行下一步，但它没有。

以下是预检请求标头：

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

这是同一请求的响应标头（请记住，状态 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 标头，并且除 text/plain、application/x-www-form-urlencoded 或 multipart/form-data 之外的任何 Content-Type 请求标头的值都会触发浏览器发送 CORS 预检 OPTIONS 请求。

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