DELETE로 api 문제 가져 오기 - cors가 좋은 경우에도 OPTIONS가 변경됩니다.

클라이언트 브라우저에서 fetch api를 사용하면 GET 또는 POST에 문제가 없지만 가져 오기 및 삭제에 문제가 있습니다. DELETE 요청 메소드를 OPTIONS로 변경하는 것 같습니다.DELETE로 api 문제 가져 오기 - cors가 좋은 경우에도 OPTIONS가 변경됩니다.

연구의 대부분은 코르 문제가되는 것으로 나와 있지만, 나와 관련된 문제는 다룹니다.

이것은 valid fetch spec api link 경우 잘 모르겠습니다 만 보여줍니다 :

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

출처

2017-04-19 dman

OPTIONS 요청이 예상 기본적으로 브라우저 확인하기 위해 사용하는 메커니즘이다 경우이의 요청 DELETE 대소 문자가 허용됩니다.

OPTIONS 요청은 서버에서 401 Unauthorized 응답을 얻은 것으로 보입니다. 이로 인해 실제로 요청이 실패하게됩니다. 대신 200 OK으로 응답하십시오.

제쳐두고, 헤더 Access-Control-Allow-Headers:은 잘못되었지만 이것은 아무런 영향을 미치지 않습니다.

출처

2017-04-19 03:29:20 Evert

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 핸들러를 포함해야

출처

2017-04-19 04:06:47 sideshowbarker

DELETE로 api 문제 가져 오기 - cors가 좋은 경우에도 OPTIONS가 변경됩니다.

답변

관련 문제