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

在用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文件了


 

  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值