使用DELETE获取api问题 - 即使cors很好，也会更改为OPTIONS [英] Fetch api issue with DELETE - changes to OPTIONS even when cors is good

问题描述

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

大部分的研究都显示cors问题，但在我看来，我已经涵盖了cors问题。

我不确定这是有效的获取规范API链接，但它显示：

CORS安全列出的方法是一种方法，它是 GET ， HEAD 或 POST 。

我不确定这是否意味着我不能在使用cors获取时使用DELETE，这就是为什么我遇到问题？

浏览器代码：

  var request = 
 new请求（url，{
 credentials：'include'，
 mode：'cors'，
 method：'DELETE'
}）; 
 $ b返回fetch（请求）
 .then（this.fetchError.bind（this））
 .then（this.json）
 .then（（response） => {
 this.set（`uploadState。$ {index} .value`，false）; 
}）
 .catch（（e）=> {
 console.log（e）; 
}）; 
}，
  

---

chrome网络标签页：

 请求网址：http：//72.12.4.3：9000 / api / v1 / listings / 3/47 / image-3 -47-1492565415145.jpeg 
请求方法：选项
状态代码：401未授权
远程地址：72.12.4.3：9000 
 
响应头文件
查看来源
 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 
连接：keep-alive 
 Content-Length：25 
 Content-Type：application / json; charset = utf-8 
日期：2017年4月19日星期三01:36:07 GMT 
 ETag：W /19-9NCRiMyz + z1Bt6fGQfcxA
 X-Powered-By：Express 
 
请求标题
查看源
接受：* / * 
接受编码：gzip，deflate，sdch 
 Accept-Language：en-US，en; q = 0.8 
 Access-Control-Request-Headers：
 Access-Control-Request-Method：DELETE 
 Cache-Control：no-cache 
连接：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 / 
用户代理：Mozilla / 5.0（X11; Linux x86_64）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 56.0.2924.87 Safari /537.36 
  

解决方案 请求是预期的，并且基本上是浏览器用来检查在这种情况下是否允许请求 DELETE 的机制。

OPTIONS 请求似乎得到 401 Unauthorized code>来自服务器的响应。这确实会导致请求失败。回应 200 OK 。 另外，头部 Access-Control- Allow-Headers：是错的，但这不应该影响任何内容。

Using fetch api in the client browser, I am not having issues with GET or POST, but I am having issues with fetch and DELETE. Its seems to change the DELETE request method to OPTIONS.

Most of the research shows to be a cors issues, but with me I have the cors issues covered.

I am not sure if this is a valid fetch spec api link but it shows:

A CORS-safe listed method is a method that is GET, HEAD, or POST.

I am not sure if this means I can not use DELETE on fetch with cors and this is why I am having issues?

browser code:

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 network tab:

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

解决方案

The OPTIONS request is expected and basically is the mechanism that the browser uses to check if the request DELETE in this case is allowed.

The OPTIONS request seems to get a 401 Unauthorized response from your server. This would indeed cause the request to fail. Respond with 200 OK instead.

As an aside, the header Access-Control-Allow-Headers: is wrong, but this shouldn't affect anything.

这篇关于使用DELETE获取api问题 - 即使cors很好，也会更改为OPTIONS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！