localhost와 cors 오류를 피하기 위해 nginx 리버스 프록시

Question

로컬 프론트 엔드 개발을 위해 gulp 서버를 사용하고 있으며, 연결하는 응용 프로그램이 프론트 엔드와 백엔드 모두 다른 서버에서 실행 중입니다.

gulp 서버가 localhost : 1340에서 실행 중입니다. API는 다음과 같은 에러가 발생 https://aaa.bbb.com/api

에 있습니다 : No 'Access-Control-Allow-Origin' header is present on the requested resource.

그래서 내가 nginx를 로컬 호스트에 서버를 시작할 수 있도록,의 nginx를 사용하여 역방향 프록시 서버를 설정하려고 : 8001을하고 역할 꿀꺽 꿀꺽 거리는 서버와 API 사이의 연결로 8001, 난 여전히 고르 오류를 얻을, 그것은 그냥 꿀꺽 서버 내용을 전달한다 : 여기

은

server { # simple reverse-proxy 
    listen  8001; 
    server_name localhost; 
    # access_log logs/domain2.access.log main; 


    location/{ 
     proxy_pass  http://localhost:1340; 
     proxy_set_header Host $http_host; 
     add_header Access-Control-Allow-Origin *; 


     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header X-NginX-Proxy true; 

    } 
    location /api/ { 
     proxy_pass  https://aaa.bbb.com/api/; 
     add_header Access-Control-Allow-Origin *; 

     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header Host $http_host; 
     proxy_set_header X-NginX-Proxy true; 



     proxy_redirect off; 

    } 
    } 

하지만 난 localhost를 가리킬 때 무슨 일 것은이 nginx.conf에서 설정됩니다. 내가 localhost : 8001/api /를 가리킬 때 프런트 엔드가 배포 된 외부 서버의 내용을 전달합니다.

필자가 필요로하는 동작은 외부 서버를 가리키는 내 로컬 UI이므로 로컬에서 변경 한 사항을 확인할 수 있습니다. 보안 기능이 해제 된 상태에서 크롬을 사용하는 방법이 있지만 다른 브라우저에서 변경 한 사항을 확인할 수 없습니다.

도움/아이디어를 많이 주시면 감사하겠습니다.

Answer 1

나는 똑같은 문제가 있었고이 질문에 답을 찾지 못했습니다. 그래서 그냥 시도하지 않는 이유를 생각했습니다. 그리고 그것은 나를 위해 직접적으로 작용했습니다. 헤더 설정 또는 아무것도 - 그냥 기본 nginx 구성에 추가 된 proxy_passes. 이것이 내가 한 것입니다.

server { 
    listen  8001; 
    server_name localhost; 

    location/{ 
     proxy_pass http://127.0.0.1:1340; 
    } 

    location /api { 
     proxy_pass https://aaa.bbb.com/api; 
    } 
} 

설정 한 헤더 중 하나 또는 두 개가 문제의 원인 일 수 있습니다. 브라우저가 여러 도메인이 있다는 것을 의심하지 않도록 정방향 역방향 프록시를 원할뿐입니다.