众所周知,当前端页面域名端口和后端服务域名端口不同时,请求便会跨域。
这时候除了后端语言去解决以外,还可以通过配置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这个域名端口