使用Nginx代理后项目路径改变导致访问不到静态资源的解决方法

最新推荐文章于 2025-07-02 00:58:02 发布

原创最新推荐文章于 2025-07-02 00:58:02 发布 · 4.5w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#Nginx #静态资源 #前后分离

本文介绍如何通过调整Nginx配置解决前后端分离项目中的跨域问题，确保动态加载JS文件正常工作。提供三种配置方法，帮助开发者正确设置反向代理，保持目录结构不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用Nginx解决跨域问题时，遇到了这个问题，记录一下

由于是前后分离的项目，在html页面中使用了$.get(url)方法来动态加载js文件，使用Nginx反向代理后项目路径改变了，导致404

修改前nginx.conf的配置

server {
        listen       80;
        server_name  a.a.a.a;
		
        location /api/{
            proxy_pass http://b.b.b.b:8080;
        }
}

使用“/api/”来代理“IP：端口号”

想要访问 http://b.b.b.b:8080/项目名/html/a.html 地址

需要在浏览器访问 http://a.a.a.a/api/项目名/html/a.html

此时项目路径变为 /api/项目名/html/a.html

在使用 $.get(url) 方法时出现了拼接成的url地址并不存在的问题

方法一

server {
        listen       80;
        server_name  a.a.a.a;
		
        location /{
            proxy_pass http://b.b.b.b:8080;
        }
}

使用“/”来代理“IP：端口号”

想要访问 http://b.b.b.b:8080/项目名/html/a.html 地址

在浏览器访问 http://a.a.a.a/项目名/html/a.html 即可

方法二

server {
        listen       80;
        server_name  a.a.a.a;
		
        location /项目名/{
            proxy_pass http://b.b.b.b:8080/项目名/;
        }
}

使用“/项目名/”来代理“IP：端口号/项目名/”（注意不要缺少后面的斜杠）

想要访问 http://b.b.b.b:8080/项目名/html/a.html 地址

在浏览器访问 http://a.a.a.a/项目名/html/a.html 即可

在需要配置多个location时，建议使用这种方法来区分要代理的地址

两种方法的目的都是在不改变目录结构的前提下进行访问，这样就可以按绝对路径来取js文件了