即使存在 CORS 标头，DELETE 方法的获取请求也失败答案

【问题标题】：Fetch request failing for DELETE method even though CORS headers are present即使存在 CORS 标头，DELETE 方法的获取请求也失败
【发布时间】：2020-03-13 14:28:07
【问题描述】：

我正在尝试通过 fetch 发出跨域删除请求，但它以 403 失败（确切错误 Access to fetch at 'http://localhost:1180/api/deleteResource/name/something/city/Shenzhen%202' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.）

这是我的请求和响应标头 -

General -
Request URL: http://localhost:1180/api/deleteResource/name/something/city/Shenzhen%202
Request Method: OPTIONS
Status Code: 403 FORBIDDEN
Remote Address: [::1]:1180
Referrer Policy: no-referrer-when-downgrade

Response Headers-
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: Content-Type,Content-Length,Server,Date
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type, Content-Length, Server, Date
Content-Length: 43
Content-Type: application/json
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Nov 2019 07:24:51 GMT
Server: Werkzeug/0.14.1 Python/3.6.5
X-Content-Type-Options: nosniff

Request headers-
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: access-control-allow-methods,access-control-allow-origin
Access-Control-Request-Method: DELETE
Connection: keep-alive
Host: localhost:1180
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36

而我的 GET 请求运行良好 -

General - 
Request URL: http://localhost:1180/api/getResources
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:1180
Referrer Policy: no-referrer-when-downgrade

Response Headers -
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: Content-Type,Content-Length,Server,Date
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type, Content-Length, Server, Date
Content-Length: 6164
Content-Type: application/json
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Nov 2019 07:24:44 GMT
Server: Werkzeug/0.14.1 Python/3.6.5
X-Content-Type-Options: nosniff

Request Headers - 
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:1180
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36

我明白，由于我的 GET 成功，简单 GET 和 POST 请求不会发生预检检查，但我仍然不明白为什么我的 DELETE 失败，因为它已被服务器允许。有人可以帮我理解这里的问题吗？

【问题讨论】：

后端使用哪种语言？

标签： javascript cors fetch

【解决方案1】：

您的DELETE 请求具有access-control-allow-methods,access-control-allow-origin 标头，但作为响应，它只允许Content-Type, Content-Length, Server, Date 标头。这就是它抛出 doesn't pass access control 错误的原因。

解决方案

将Access-Control-Allow-Headers 设置为允许Content-Type,Content-Length,Server,Date,access-control-allow-methods,access-control-allow-origin。

我不确定您的Back-End 技术，在不了解您的后端技术的情况下，我无法提供代码以允许高于headers

【讨论】：