Nginx Angular 應用程式無法在生產環境中存取本地主機上的 REST API

Question

我已經搜索了很多，但仍然沒有找到適合我的問題的解決方案...

我們有一個 NodeJS 應用程序，它是一個在 localhost:3000 上公開 REST API 的 Express 應用程式。我們還有一個 AngularJS 應用程序，該應用程式已建置（ng build --prod），然後由 Nginx 提供服務。在本地機器上，一切正常。當我將其投入生產時，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日誌中都沒有任何信息，登入伺服器後我可以透過curl成功存取REST API。我被困住了。任何幫助表示讚賞。

Answer 1

事實證明，Angular 無法解析 localhost，但使用 127.0.0.1 運作得很好。