nginx配置代理,解决前端请求后端服务跨域问题

众所周知,当前端页面域名端口和后端服务域名端口不同时,请求便会跨域。
这时候除了后端语言去解决以外,还可以通过配置nginx代理来解决跨域。

配置逻辑如下:

server {
     listen 8086;     #1.你想让你的这个项目跑在哪个端口
     server_name 192.168.3.77;     #2.当前服务器ip

     location / {
        root   D:/project/UniApp/unpackage/dist/build/h5/;     #3.dist文件的位置(根据自己dist包放置的位置决定) 
        try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写,history和bash通用,这里配置主要是兼容history模式,进行一个404的重定向)
     }

     location /dev-api/ {
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://192.168.207.109:18080/;
     }
 }

这是vue项目常规的配置,然后第二个location就是nginx代理的配置,
这时候前端项目最后打包的后端服务域名端口配置为 /dev-api/
那么浏览器network显示的就是请求http://192.168.3.77:8086/dev-api/
那么最后访问的就是http://192.168.207.109:18080这个域名端口

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值