预检选项请求在浏览器中返回 403/forbidden 和不同的标头

Question

我目前正在开发一个混合应用程序，该应用程序也应该稍后通过官方公司域在常规网络浏览器中运行。后端提供了一个 RESTful API，它支持所有类型的事情：获取条目、获取用户等。至少对于测试和应用程序来说，请求的来源不是域本身，而是 localhost。

现在导致问题的原因是使用

POST

、

Content-Type: application/json

和 JSON 正文进行发布。在浏览器中运行进行测试时，Chrome 会执行预检 OPTIONS 请求。我明白为什么，这没有问题。不幸的是，请求的状态总是为 403 - 我认为这与 HTTP 状态并不对应，而更多的是基于响应本身的 chrome 解释。 Chrome 还表示缺少 Access-Control-Allow-Origin 标头。以下是我可以评估的一些事实：

• chrome 中的响应确实不包含这个和其他一些标头。这完全没有意义，因为：
• 相同的 OPTIONS 请求与 Postman (HTTP 200) 配合得很好
• Chrome 的行为至少在 Firefox 中是相同的
• 我从邮递员那里得到的回复包含所有必要的标头：

从 OPTIONS 请求返回的 Postman 标头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Auth-Token, Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods: POST, PATCH, GET, PUT, OPTIONS, DELETE

有人可以帮助解决导致浏览器中的预检请求失败的原因吗？为什么 OPTIONS 响应在浏览器和 Postman 中不包含相同的标头？如果您需要更多信息，请告诉我！我没有包含代码，因为 OPTIONS 请求是由浏览器启动的，而不是由我启动的。

提前非常感谢并致以诚挚的问候。

---

编辑：以下是来自 Chrome 和 Postman 的完整请求：

铬：

General:
Request URL: [HIDDEN]/api2/entries/57734/comments
Request Method: OPTIONS
Status Code: 403 
Remote Address: [HIDDEN]
Referrer Policy: no-referrer-when-downgrade

Response:
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 20
Date: Tue, 24 Apr 2018 09:18:58 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.8.0
X-Application-Context: application:production
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Request:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-DE;q=0.8,en;q=0.7,en-US;q=0.6
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: [HIDDEN]
Origin: http://localhost:3000
Pragma: no-cache
User-Agent: Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36

邮递员标题：

Access-Control-Allow-Headers: X-Auth-Token, Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods: POST, PATCH, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Auth-Token
Access-Control-Max-Age: 1209600
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Tue, 24 Apr 2018 09:24:04 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.8.0
Strict-Transport-Security: max-age=31536000
X-Application-Context: application:production
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Answer 1

Chrome等浏览器在真正要发送的POST、PUT方法之前发送http OPTIONS方法。然后 OPTIONS 方法检查正确的后续方法和标头。您需要检查响应标头，Access-Control-Allow-Origin/Headers/Method（我不确定..确切的标头名称..）如果您有 403 与 OPTIONS 方法，您应该检查服务器中的 OPTIONS 方法允许！或者您需要检查您的真实请求（POST，PUT，...）标头方法和标头是否与 OPTIONS 方法响应标头（例如 Access-Control-Allow-*！）相对应！这主要是因为您的自定义标头而发生的！您需要添加http OPTIONS响应标头，Access-Control-Allow-headers：您的自定义标头名称！

希望对你有帮助