☰

Nginx 反向代理不从其他服务器加载 JS 和 CSS

tag-icon • tag-icon nginx nginx-reverse-proxy angular
Nginx 反向代理不从其他服务器加载 JS 和 CSS

我有两个版本的 WebApp，运行在两个不同的服务器上（prod 和 dev）。prod 版本在 上可用exemple.com，dev 版本在 上可用exemple.com/dev。但是，当我设置代理以加载 dev 版本时，只会加载 index.html 文件，不会加载 JS 和 CSS。
如果我在 devtools 中检查请求 url，我会看到index.html来自https://exemple.com/dev而main.bundle.js来自https://exemple.com/

这是nginx.conf生产服务器

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/app;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }

        location /dev {
                proxy_pass http://10.10.38.18/;
                proxy_http_version 1.1;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

这是开发服务器：

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/webApp;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                autoindex on;
        }
        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }

答案1

虽然可以配置 nginx 在提供内容之前重写内容中的 URL，方法是使用sub_filter这会给 nginx 带来沉重的负担，而这通常是完全没有必要的。

最好直接配置应用程序以生成正确的 URL。对于 Angular，这是APP_BASE_HREF环境。

相关内容