nginx 설정 크로스 필드 요청
403 크로스 필드 오류 가 발생 했 을 때
No 'Access-Control-Allow-Origin' header is present on the requested resource
Nginx 서버 에 응답 하 는 header 인 자 를 설정 해 야 합 니 다.해결 방안
Nginx 프로필 에 다음 인자 만 설정 하면 됩 니 다.
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
}
위 에 코드 를 설정 하면 문 제 를 해결 할 수 있 습 니 다. 깊이 연구 하고 싶 지 않 으 면 여 기 를 보면 됩 니 다 = - =
해명
1. Access-Control-Allow-Origin
。 Nginx `Access-Control-Allow-Origin *` , (Origin), 。
2. Access - Control - Allow - Headers 는 다음 과 같은 오류 가 발생 하지 않도록 하기 위해 서 입 니 다.
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
이 오 류 는 현재 요청 한 Content - Type 의 값 이 지원 되 지 않 음 을 표시 합 니 다.사실은 우리 가 'application / json' 의 유형 요청 을 해서 생 긴 것 이다.여 기 는 하나의 개념 과 관련된다.
(preflight request)
아래 의 '예 검 요청' 소 개 를 보십시오.3. Access - Control - Allow - Methods 는 다음 과 같은 오 류 를 방지 하기 위해 서 입 니 다.
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
4.
OPTIONS
에 204
의 반환 을 추가 하 는 것 은 POST 요청 을 보 낼 때 Nginx 가 접근 을 거부 하 는 오 류 를 처리 하기 위 한 것 입 니 다.'예비 검사 요청' 을 보 낼 때 방법
OPTIONS
이 필요 하기 때문에 서버 에서 이 방법 을 허용 해 야 합 니 다.3. 예비 검사 요청 (preflight request)
사실 위의 설정 은 W3C 표준 과 관련된다.
CROS
전역 자원 공유 (Cross - origin resource sharing) 라 고 하 는데 전역 요청 을 해결 하기 위 한 것 이다.크로스 도 메 인 자원 공유 (CORS) 표준 에 HTTP 첫 번 째 필드 가 추가 되 었 습 니 다. 서버 가 어떤 소스 에 접근 할 수 있 는 권한 이 있 는 지 설명 할 수 있 습 니 다.또한 규범 요구
HTTP ( GET HTTP , MIME POST )
, 브 라 우 저 는 우선 OPTIONS 방법 을 사용 하여 사전 검사 요청 (preflight request) 을 하여 서버 에서 이 크로스 도 메 인 요청 을 허용 하 는 지 알 아야 합 니 다.서버 가 허용 을 확인 한 후에 야 실제 HTTP 요청 을 시작 합 니 다.사전 검사 요청 의 반환 에서 서버 측 에서 도 클 라 이언 트 에 게 신분증 (Cookies 와 HTTP 인증 관련 데이터 포함) 을 휴대 해 야 하 는 지 알 릴 수 있다.사실
Content-Type application/json
의 요 구 는 바로 위 에서 말 한 MIME POST
이다. CORS 규정 에 따 르 면 Content - Type 은 다음 과 같은 MIME 유형 에 속 하지 않 고 모두 예비 검사 요청 에 속한다.application/x-www-form-urlencoded
multipart/form-data
text/plain
그래서 application / json 의 요청 은 정식 통신 에 앞서 '예비 검사' 요청 을 한 번 추가 합 니 다. 이번 '예비 검사' 요청 은 머리 정보
Access-Control-Request-Headers: Content-Type
를 가 져 옵 니 다.OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
...
서버 가 응답 할 때 되 돌아 오 는 머리 정보
Access-Control-Allow-Headers: Content-Type
가 포함 되 지 않 으 면 기본 값 이 아 닌 Content - Type 을 받 아들 이지 않 는 다 는 뜻 입 니 다.다음 오류 가 발생 했 습 니 다.Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
참고 글:
완 일 봉 [크로스 도 메 인 자원 공유 CORS 상세 설명] MDN 웹 docs [HTTP 접근 제어 (CORS)]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.