Nginx反向代理后CSS/JS等资源无法加载的解决方案咨询

可以通过配置两个Nginx location块来解决，既满足主页代理到目标子路径，又让根相对路径的资源直接代理到目标站点的对应路径，完全符合你的需求：

server {
  listen 443 ssl;
  server_name mysite.com;

  ssl_certificate /some/path/fullchain.pem;
  ssl_certificate_key /some/path/privkey.pem;
  ssl_trusted_certificate /some/path/chain.pem;

  # 精确匹配根路径，代理到example.com/mysite
  location = / {
    proxy_pass https://example.com/mysite;
    proxy_set_header Host example.com;

    proxy_ssl_server_name on;
    proxy_ssl_session_reuse on;
  }

  # 匹配所有非根路径的请求，直接代理到example.com的对应路径
  location / {
    proxy_pass https://example.com$request_uri;
    proxy_set_header Host example.com;

    proxy_ssl_server_name on;
    proxy_ssl_session_reuse on;
  }
}

原理说明： #

• location = /是精确匹配，只会捕获对mysite.com/的请求，将其代理到example.com/mysite，保证主页内容正确加载。
• 第二个location /会匹配所有其他请求（比如mysite.com/test.css、mysite.com/js/main.js等），通过$request_uri将请求的完整路径拼接到example.com后，直接代理到资源的实际存储位置（example.com/test.css），解决404问题。

这个方案完全符合你的限制条件：

• 无需重定向，地址栏始终显示mysite.com
• 不用sub_filter处理HTML内容，无额外服务器开销
• 无需为每个子目录单独配置location，两个规则覆盖所有场景

内容的提问来源于stack exchange，提问作者webman4224