Nginx 설정 CORS 구현

개발 할 때 우 리 는 자주 크로스 오 버 문 제 를 만 날 수 있다. 우리 의 일반적인 해결 방안 은 CORS 또는 JSONP 로 해결 하 는 것 이지 만 더 자주 사용 하 는 해결 방안 은 CORS 이다. JSONP 은 GET 요청 만 지원 하기 때문이다.CORS 에 관 한 지식 은 완 일 봉 의 크로스 자원 공유 CORS 를 옮 겨 이 글 을 상세 하 게 해석 하 십시오.
브 라 우 저 콘 솔 에 크로스 도 메 인 관련 오류 가 발생 하면 백 엔 드 에서 크로스 도 메 인 을 허용 하지 않 기 때문에 백 엔 드 서버 가 코드 차원 에서 설정 해 야 합 니 다.물론 백 엔 드 에서 코드 를 변경 하고 싶 지 않 을 때 도 있 습 니 다. 이 럴 때 저 희 는 프 록 시 층 nginx 에서 관련 설정 을 직접 할 수 있 습 니 다. 예 를 들 어 저 희 는 /api/v1 아래 의 관련 인터페이스 가 크로스 도 메 인 을 지원 하도록 허용 해 야 합 니 다. 저 희 는 이렇게 nginx 설정 을 작성 할 수 있 습 니 다.

location ^~ /api/v1 {

    add_header 'Access-Control-Allow-Origin' "$http_origin"; 
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; 
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type    '; 
    add_header 'Access-Control-Allow-Credentials' 'true'; 
    if ($request_method = 'OPTIONS') { 
        add_header 'Access-Control-Allow-Origin' "$http_origin"; 
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; 
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type    '; 
        add_header 'Access-Control-Allow-Credentials' 'true'; 
        add_header 'Access-Control-Max-Age' 1728000; # 20   
        add_header 'Content-Type' 'text/html charset=UTF-8'; 
        add_header 'Content-Length' 0; 
        return 200; 
    } 
    #               ，                
    proxy_pass http://127.0.0.1:8085; 
    proxy_set_header Host $host; 
    proxy_redirect off; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_connect_timeout 60; 
    proxy_read_timeout 60; 
    proxy_send_timeout 60; 

}