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

hgtggwj0  于 2023-05-22  发布在  Nginx
关注(0)|答案(1)|浏览(213)

我有两个版本的Angular WebApp运行在两个不同的服务器上(prod和dev)。prod版本在www.example.com上exemple.com,dev版本在www.example.com上exemple.com/dev。但是,当我设置代理加载dev版本时,只加载index.html文件,不加载JS和CSS。当我在devtools中检查请求URL时,我看到index.html来自https://exemple.com/dev,而main.bundle.js来自https://exemple.com/
下面是prod服务器的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;
        }

这里是dev服务器:

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;
        }
os8fio9y

os8fio9y1#

这是正常的,默认情况下,angular应用程序有一个<base href="/">标签,告诉浏览器从/https://exemple.com/)获取相对URL。
您需要将href="/"更改为href="/dev/",或者可以直接将其替换为带有sub_filter模块的nginx。
另一个解决方案(也许是最好的一个)是从www.example.com这样的子域为开发应用提供服务dev.example.com,您需要设置DNS以使dev.example.com指向example.com并定义两个nginx服务器:

server {
  listen 80 default_server;
  server_name example.com;
  ...
}

server {
  listen 80;
  server_name dev.example.com;
  ...
}

相关问题