英文:
Nginx Reverse Proxy do not load JS and CSS from other server
问题
我有两个版本的Angular 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/。
这是prod服务器的nginx.conf配置：
server {
listen 80 default_server;
server_name _;
root /site/app;
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' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization';
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;
server_name _;
root /site/webApp;
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' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization';
add_header 'Access-Control-Allow-Credentials' 'true' always;
}
}
希望这有助于解决你的问题。
英文:
I have two versions of an Angular WebApp running on two different servers (prod and dev). The prod version is on exemple.com and the dev version is on exemple.com/dev. However, when I set the proxy to load the dev version, only the index.html file is loaded, JS and CSS are not loaded. When I check the request url in devtools, I see that index.html comes from https://exemple.com/dev while main.bundle.js comes from https://exemple.com/.
Here is the nginx.conf for the prod server:
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;
}
And here for the dev server:
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
得分: 1
这是正常的，默认情况下，Angular 应用程序有一个 <base href="/"></base> 标签，它告诉浏览器从 / (https://example.com/) 获取相对 URL。
你需要将 href="/" 更改为 href="/dev/"，或者你可以直接使用 nginx 的 sub_filter 模块进行替换。
另一种解决方案（也许是最好的解决方案）是从子域名 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;
...
}
英文:
This is normal, by default angular apps have a <base href="/"> tag that says to the browser to get relative urls from / (https://example.com/).
You need to either change the href="/" to href="/dev/" or you can replace it directly with nginx with the sub_filter module.
An other solution (maybe the best one) would be to serve the dev app from a subdomain like dev.example.com, you would need to set your DNS to make dev.example.com point to example.com and define two nginx servers:
server {
listen 80 default_server;
server_name example.com;
...
}
server {
listen 80;
server_name dev.example.com;
...
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论