CORS 크로스 도 메 인 - Nginx 사용 방법 (Access - Control - Allow - Origin 오류 알림)

문제 설명
위의 그림 이 나 왔 을 때 방문 요청 외부 도 메 인 URL 에 접근 할 수 없습니다. 브 라 우 저 는 외부 도 메 인 URL 에 접근 하 는 것 이 안전 하지 않 아서 크로스 도 메 인 문제 라 고 부 르 지 못 합 니 다.이 위 에 'NO Access - Control - Allow - Origin' 이라는 중요 한 말 이 있 는데 이게 뭐 예요?'Access - Control - Allow - Origin' 헤드 만 추가 하면 접근 할 수 있 지 않 을까요?어떻게 추가 합 니까?다른 문제 없 을까요?
Access - Control - Allow - Origin 은 접근 이 허용 되 는 외부 영역 URI 를 표시 합 니 다.
예: Access - Control - Allow - Origin:http://www.a.com www. a. com 사이트 방문 허용
Access - Control - Allow - Origin: * "*" 는 모든 외부 URL 에 접근 할 수 있 습 니 다.
이것 은 서버 쪽 에서 설정 한 것 으로 서버 가 브 라 우 저 에 게 이 사이트 에 접근 할 수 있 도록 알려 줍 니 다.이 매개 변 수 를 설정 하면 도 메 인 을 뛰 어 넘 을 수 있다 는 것 이다.이런 크로스 오 버 방식 도 CORS 라 고 합 니 다.
CORS 는 W3C 표준 으로 전 칭 '크로스 - origin resource sharing' (Cross - origin resource sharing) 이다.브 라 우 저가 크로스 소스 서버 에 XML HttpRequest 요청 을 할 수 있 도록 해 AJAX 가 같은 소스 로 만 사용 할 수 있 는 제한 을 극복 했다.본 고 는 바로 CORS 기술 의 실현 을 논 하 는 것 이다.
기술 소 개 는 우리 가 크로스 필드 알림 이 나 왔 을 때, 사실 우 리 는 서버 에 요청 을 한 번 보 내 고 받 았 습 니 다. (요청 은 연결 을 보 내 는 url 입 니 다.)서버 가 요청 을 받 은 후 브 라 우 저 에 게 외부 사이트 에 접근 할 수 없다 고 알려 줍 니 다.브 라 우 저 는 외부 도 메 인 에 접근 할 수 없 는 이 유 를 표시 합 니 다.
한편, CORS 는 서버 에 Response Headers 를 설정 하여 파라미터 Access - Control - Allow - Origin, Access - Control - Allow - Headers, Access - Control - Allow - Methods 를 되 돌려 주 고 사이트 가 외부 영역 에 접근 할 수 있 도록 하 는 것 이다.
매개 변 수 는 control - Allow - Origin 이 접근 할 수 있 는 외부 요청 을 표시 합 니 다.access - control - Allow - Headers 의 첫 번 째 필드 는 예비 검사 요청 의 응답 에 사 용 됩 니 다.실제 요청 에서 휴대 할 수 있 는 첫 번 째 필드 를 가리 키 고 있 습 니 다.access - control - Allow - methods 첫 번 째 필드 는 예비 검사 요청 의 응답 에 사 용 됩 니 다.실제 요청 에 사용 할 수 있 는 HTTP 방법 을 가 리 켰 습 니 다.어떻게 조작 하 는 지 1. 다음 그림 을 보면 저희 가 요청 을 보 낼 때 Request Headers 에서 Origin:http://www.a.comOrigin 은 현재 사이트 URL 도 메 인 입 니 다.
 
2. Nginx 서버 가 수신 하면 CORS 설정 여 부 를 확인 합 니 다. 설정 한 도 메 인 이름 이 다음 그림 과 일치 하 는 지 확인 합 니 다.http://www.a.com이 사이트 에 접근 할 수 있 도록 일치 합 니 다.
3. CORS 를 사용 하여 요청 을 보 냅 니 다. 첫 번 째 요청 은 "OPTIONS" 입 니 다. 이것 은 반환 헤드 를 설정 하고 성공 으로 돌아 갑 니 다.이후 자동 으로 post / get 요청 을 보 내 서버 에 성공 적 으로 보 냅 니 다.이렇게 코드 와 도 메 인 을 성공 적 으로 넘 을 수 있 습 니 다.
4. 마지막 으로 Response Headers 를 살 펴 보 니 Access - Control - Allow - Origin 설정http://www.a.com도 메 인 이름대표 님, CORS 설치 성공 하 셨 습 니 다.
호환성 pc 호 환 ie8 이상, 휴대 전화 단말기 에서 마음대로 사용 합 니 다.더 낮은 버 전의 브 라 우 저 를 호 환 하려 면 JSONP 나 Nginx 를 사용 하 십시오.
 
Nginx 설정 코드 는 Nginx 의 nginx. cof 에 아래 코드 를 추가 하면 CORS 크로스 도 메 인 을 실현 할 수 있 습 니 다.
set $origin '*';#도 메 인 을 넘 어야 하 는 요청 주소 if ($request method = 'OPTIONS') {add header' Access - Control - Allow - Origin '$origin; add header' Access - Control - Allow - Methods' GET, POST, OPTIONS'; add header 'Access - Control - Max - age' 1728000; add header 'Content - Type' '' text / plain charset = UTF - 8 '; add header' Content - Length '0; return 204;}
if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' $origin; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}
if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' $origin; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}123456789101112131415161718192021
Springboot 설정 코드 @ Configurationpublic class CorsConfig {@ Bean public FilterRegistrationBean corsFilter () {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource (); CorsConfiguration config = new CorsConfiguration (); config. setAllowCredentials (true); / / 허용 할 사이트 도 메 인 이름 을 설정 합 니 다. 모두 허용 하면 * config. addAllowedOrigin (") 으로 설정 합 니 다.http://localhost:4200"); / / HEADER 또는 METHOD 를 제한 하려 면 config. addAllowedHeader (" * "), config. addAllowedMethod (" * "), source. registerCorsConfiguration (" / * ", config), FilterRegistration Bean bean = new FilterRegistration Bean(new CorsFilter (source); / 이 순 서 는 매우 중요 합 니 다. 번 거 로 움 을 피하 기 위해 맨 앞 에 bean. setOrder (0); return bean;} 123456789101112131415171819 Node express 설정 코드 var app = express ();
도 메 인 을 넘 나 들 어 app. all ('*', function (req, res, next) {res. header ("Access - Control - Allow - Origin", "*"); res. header ("Access - Control - Allow - Origin", "*"); res. header ("Access - Control - All- All- Android - ethod", "PUT, POST, GET, DELTE, OPTION"); res. header ("X - Power- BY", "3.2.1", "X - Power- BY", "3.2.1") res. header ("Content - Type", "응용 프로그램 / json / json / json / json / json / json / json / / / json... 헤더 (" Content - Type ",", "애플 리 케; charset = utf - 8"); next();});app.listen(6064)

URL                                                                
http://www.a.com/a.js
http://www.a.com/b.js                                             

http://www.a.com/lab/a.js
http://www.a.com/script/b.js                                   

http://www.a.com:8000/a.js
http://www.a.com/b.js                  ，                       

http://www.a.com/a.js
https://www.a.com/b.js                 ，                       

http://www.a.com/a.js
                   ip                   

http://www.a.com/a.js
http://script.a.com/b.js                ，                   

http://www.a.com/a.js
http://a.com/b.js                        ，      （  ）   （cookie           ）

http://www.cnblogs.com/a.js
http://www.a.com/b.js                                           

다음으로 전송:https://www.cnblogs.com/zhengchunyuan/p/10018529.html