CORS, 예비비행 요청 및 옵션 방법

side project의 업무에서 나는 많은 사람들에게 익숙한 문제인 COR에 부딪혔다.그러나 백엔드에서 크로스 소스 코드를 사용하는 것을 잊었을 때, 내가 받은 메시지는 흔치 않았다.이 사람이 말했다.

Failed to load resource: Preflight response is not successful.
Fetch API cannot load <url>. Preflight response is not successful

이것은 내가 서버에 보낸 첫 번째 요청GET이다.프런트엔드와 다른 도메인에서 호스팅되는 API에서 데이터를 얻습니다.이것은 간단한 부탁인데, 잘못은 나를 매우 곤혹스럽게 한다.약간의 고장 제거를 통해 나는 문제를 해결할 방법을 거의 찾지 못하고 많은 것을 배웠다.

CORS - 빠른 소개

CORS 또는 소스 간 리소스 공유는 서버에서 서로 다른 소스로부터의 요청이 허용되는지 확인하는 방법입니다.웹 애플리케이션xyz.com이 사용하거나something.io API가 XMLHttpRequest에 요청하면 CORS는 HTTP 헤더를 사용해 애플리케이션fetch에 접근할 수 있는지xyz.com를 알려준다는 것이다.권한은 something.io 에서 설정해야 합니다. 어떤 방법과 출처를 사용할 수 있는지 지정할 수 있습니다.

기본적으로 보안상의 이유로 something.io와 XMLHttpRequest는 모두 같은 소스 정책을 따르기 때문에 백엔드에서 CORS와 HTTP 헤더를 따로 설정하지 않으면 서로 다른 영역에서 요청이 실패합니다.

비행 전 요청은 무엇입니까?

비행 전에 우리는 요청을 두 가지로 나눌 수 있는데 그것이 바로 단순 요청과 비행 전 요청이다.

간단한 부탁

몇몇 요청은 비행 전 검사를 촉발하지 않는다.클라이언트와 서버 간에 권한을 검사하기 위해 간단하게 CORS 헤더를 교환할 수 있습니다.요청을 단순화하려면 다음과 같은 몇 가지 기준을 충족해야 합니다.

허용되는 방법은

fetch

GET

HEAD

고유한 제목:

POST

Accept

Accept-Language

Content-Language(단, 아래의 추가 요구 사항을 주의하십시오)

Content-Type

Last-Event-ID

DPR

Save-Data

Viewport-Width

간단한 요청에 대해 Width 헤더는 세 개의 값만 허용한다

Content-Type

application/x-www-form-urlencoded

multipart/form-data

요청에 사용된 text/plain 대상에 이벤트 탐지기가 등록되지 않은 경우.XMLHttpRequestUpload 속성을 사용하여 이 파일에 접근할 수 있습니다.

요청에 사용되지 않은 대상XMLHttpRequest.upload.

사전 검사 요청

현재 요청이 상기 조건에 부합되지 않으면 브라우저는 ReadableStream 방법을 통해 원본 요청을 보내기 전에 자동으로 HTTP 요청을 보내서 원본 요청이 안전한지 확인합니다.가장 흔히 볼 수 있는 것은 OPTIONS,DELETE 또는 데이터를 수정할 수 있는 다른 방법이 있다면 CORS-safelisted(위에 열거된) 또는 PUT가 아닌 머리, 예를 들어Content-Type이다.
만약 우리가 서버에 application/json 요청을 보낸다면.브라우저 발송DELETE 요청은 제목에 저희가 요청한 OPTIONS 정보를 포함합니다.

OPTIONS /users/:id 
Access-Control-Request-Method: DELETE 
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://example.com

그리고 서버에서 검사를 하고 요청을 허용하면 상태 코드DELETE로 응답합니다.

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE

검사가 끝난 후 브라우저는 우리가 최초로 제기한 원시 200 OK 요청을 보낼 것입니다.

오류 및 복구 방법

너는 몇 가지 선택이 있다, 정말.가장 간단한 선택은 당신의 요청이 DELETE 유형에 속하는지 확인하여 비행 전 요청을 완전히 피하는 것입니다.설정과 제목을 확인하고, 필요하지 않은 복잡한 제목을 삭제하거나 변경하십시오.
그러나 이것은 단지 일부 사례만 해결했다.내 응용 프로그램은 인증을 통과했고 simple와 Authorization 방법으로 영패가 달린 PUT 헤더를 보내고 있다.나는 corsnpm 패키지를 사용하는데 내 Express 프로그램에서 COR을 사용할 수 있기 때문에 그들의 문서를 검사했고 그들은 DELETE 처리를 제공했다.한 줄만 있으면 모든 문제를 해결할 수 있다.

마지막 말

더 알고 싶으시면 MDNCORS과 OPTIONS에 관한 글을 추천합니다.This article 비행 전 훈련을 취소하려고 했을 때 매우 유용했다. OPTIONS 이런 건의는 극단적이지 않은 것 같았고 어떤 이유로 매우 불편했다.
나는 네가 이 문장을 좋아하길 바란다. 만약 네가 어떤 문제나 필기가 있다면 아래에서 평론해라.