DELETEでapiの問題を取り出す - corsが良い場合でもOPTIONSに変更する

Question

クライアントブラウザでfetch apiを使用すると、GETまたはPOSTに問題はありませんが、フェッチとDELETEに問題があります。 DELETEリクエストメソッドをOPTIONSに変更しているようです。

研究のほとんどはコルズ問題であることが示されていますが、私にはコルズ問題があります。

これはvalid fetch spec api linkある場合、私はわからないが、それは示しています

A CORSセーフリストされた方法はGET、HEAD、またはPOSTである方法です。

これは、私がフェッチでcorsで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); 
      }); 
     }, 

---

クロームネットワーク]タブ：

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 

Answer 1

OPTIONS要求が予想され、基本的にブラウザがこの中にリクエストがDELETEかどうかを確認するために使用するメカニズムです大文字でも可

OPTIONSリクエストは、ご使用のサーバーから401 Unauthorizedという応答を受け取ったようです。これは実際に要求が失敗する原因になります。代わりに200 OKと応答してください。

脇に、Access-Control-Allow-Headers:というヘッダーは間違っていますが、これは何も影響しません。

Answer 2

OPTIONS要求を処理するには、Expressバックエンドを設定する必要があります。

cors npmパッケージをインストールして、https://www.npmjs.com/package/cors#enabling-cors-pre-flightの指示に従ってそれを設定することをお勧めします。そう、最低限：

var express = require('express') 
var cors = require('cors') 
var app = express() 
app.options('/api/v1/', cors()) // CORS-enable OPTIONS requests 
app.del('/api/v1/', cors(), // CORS-enable DELETE requests 
    function (req, res, next) { 
    res.json({msg: 'This is CORS-enabled for all origins!'}) 
}) 
app.listen(80, function() { 
    console.log('CORS-enabled web server listening on port 80') 
}) 

：

var express = require('express') 
var cors = require('cors') 
var app = express() 
app.options('/api/v1/', cors()) // CORS-enable OPTIONS requests 
app.listen(80, function() { 
    console.log('CORS-enabled web server listening on port 80') 
}) 

またDELETEのハンドラを含める必要があるかもしれません