如何用Nginx代理远程Web前端(JS)？解决资源路径匹配问题

方法一：添加HTML base标签 #

在/proxy_route/index.html的<head>标签内添加<base>标签，指定页面所有相对路径资源的基准URL：

<head>
  <base href="/proxy_route/">
  <!-- 其他head内容 -->
</head>

这样页面里所有以相对路径引用的JS、CSS（比如<script src="index.js">），浏览器都会自动拼接成/proxy_route/index.js来请求，无需修改每个资源的引用路径。

方法二：前端项目配置基础路径 #

如果是Vue、React这类框架开发的项目，可以直接在项目配置里设置资源的基础路径：

• Vue项目：在vue.config.js中配置publicPath：

  module.exports = {
    publicPath: '/proxy_route/'
  }
  

• React项目：在package.json中添加homepage字段：

  {
    "homepage": "/proxy_route/"
  }
  

重新打包后，所有资源的引用路径会自动带上/proxy_route/前缀，浏览器请求时就会使用正确的地址。

方法三：Nginx重写规则（无需修改前端） #

如果不想改动前端代码，可以在Nginx配置中添加重写规则，将无前缀的资源请求转发到带前缀的路径：

server {
  # 其他配置...

  # 匹配JS、CSS等静态资源请求
  location ~* \.(js|css|png|jpg|svg)$ {
    # 将请求的路径重写为带/proxy_route/前缀的路径
    rewrite ^/(.*)$ /proxy_route/$1 last;
    # 如果资源是后端服务提供的，替换为对应的proxy_pass
    # proxy_pass http://your_backend_server/proxy_route/$1;
  }
}

注意要确保这个规则不会影响其他正常的路径请求，可根据实际资源类型调整正则匹配的后缀。

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