Nginx Angular 앱은 프로덕션 환경의 로컬 호스트에서 REST API에 액세스할 수 없습니다.

Nginx Angular 앱은 프로덕션 환경의 로컬 호스트에서 REST API에 액세스할 수 없습니다.

꽤 많이 검색했지만 여전히 내 문제에 맞는 해결책을 찾지 못했습니다.

localhost:3000에 REST API를 노출하는 Express 앱인 NodeJS 애플리케이션이 있습니다. 또한 Nginx에서 빌드한 후(ng build --prod) 제공하는 AngularJS 애플리케이션도 있습니다. 로컬 컴퓨터에서는 모든 것이 잘 작동합니다. 프로덕션에 적용하면 Angular 앱이 API 엔드포인트에 액세스할 수 없습니다.

XHR 헤더 정보

개발자 콘솔 출력

처음에는 이것이 CORS 문제일 수 있다고 생각하여 Nginx 구성을 다음과 같이 조정했습니다.

server {
        listen 80 default_server;
        listen [::]:80 default_server;


        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        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' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
        }
}

문제가 해결되지 않았습니다. Nginx 로그에는 정보가 없으며 서버에 로그인하면 컬을 통해 REST API에 성공적으로 액세스할 수 있습니다. 나는 붙어있다. 도움을 주시면 감사하겠습니다.

답변1

결과적으로 Angular는 localhost를 확인할 수 없지만 127.0.0.1을 사용하면 문제 없이 작동합니다.

관련 정보