我是网络编程的新手,所以请多多包涵。我在 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。我错过了什么?
谢谢。
最佳答案
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
请求。
关于javascript - 跨域 REST POST 进行预检但不跟进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47685628/