使用 DELETE 获取 api 问题 - 即使 cors 很好，也会更改 OPTIONS

Posted 2023-02-27

【中文标题】使用 DELETE 获取 api 问题 - 即使 cors 很好，也会更改 OPTIONS

【英文标题】：Fetch api issue with DELETE - changes to OPTIONS even when cors is good

【发布时间】：2017-09-15 01:33:23

【问题描述】：

在客户端浏览器中使用 fetch api，我没有遇到 GET 或 POST 问题，但我遇到了 fetch 和 DELETE 问题。它似乎将 DELETE 请求方法更改为 OPTIONS。

大多数研究表明是 cors 问题，但对我来说，我已经涵盖了 cors 问题。

我不确定这是否是valid fetch spec api link，但它显示：

CORS 安全列出的方法是 GET、HEAD 或 POST 的方法。

我不确定这是否意味着我不能在使用 cors 的 fetch 时使用 DELETE，这就是我遇到问题的原因？

浏览器代码：

var request =
          new Request(url, 
            credentials: 'include',
            mode: 'cors',
            method: 'DELETE'
          );

        return fetch(request)
          .then(this.fetchError.bind(this))
          .then(this.json)
          .then((response)=> 
            this.set(`uploadState.$index.value`, false);
          )
          .catch((e) => 
            console.log(e);
          );
      ,

---

chrome 网络标签：

Request URL:http://72.12.4.3:9000/api/v1/listings/3/47/image-3-47-1492565415145.jpeg
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:72.12.4.3:9000

Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:true
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:http://72.12.4.3:8000
Connection:keep-alive
Content-Length:25
Content-Type:application/json; charset=utf-8
Date:Wed, 19 Apr 2017 01:36:07 GMT
ETag:W/"19-9NCRiMyz+z1Bt6fGQfcxA"
X-Powered-By:Express

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:
Access-Control-Request-Method:DELETE
Cache-Control:no-cache
Connection:keep-alive
Host:72.12.4.3:9000
If-None-Match:W/"19-9NCRiMyz+z1Bt6fGQfcxA"
Origin:http://72.12.4.3:8000
Pragma:no-cache
Referer:http://72.12.4.3:8000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/56.0.2924.87 Safari/537.36

【参考方案1】：

OPTIONS 请求是预期的，基本上是浏览器用来检查在这种情况下请求 DELETE 是否被允许的机制。

OPTIONS 请求似乎从您的服务器获得了401 Unauthorized 响应。这确实会导致请求失败。请改用200 OK 回复。

顺便说一句，标题Access-Control-Allow-Headers: 是错误的，但这不会影响任何事情。

【讨论】：

配置一个node后端来处理OPTIONS请求，可以安装cors npm包，配置说明在npmjs.com/package/cors#enabling-cors-pre-flight