前后端分离的项目经常会出现跨域的问题,从VUE的角度,整理下目前我解决的两种方式。
一、前端项目通过npm启动
这时可以通过vue配置代理转发,主要修改有两点:
- API接口配置
比如我的API地址是在.env.development
这个文件里配置的:
# base api
# VUE_APP_API_BASE_URL = http://10.14.122.222:9099
VUE_APP_API_BASE_URL = http://localhost:3000
将调用网关的API接口,改为VUE启动端口。
- 配置代理
修改vue.config.js
,代理部分修改为想要转发到的后台地址或网关:
devServer: {
proxy:{
'/plat':{
target:'http://localhost:9200/',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/plat':''
}
},
'/mng':{
target:'http://localhost:9202/',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/mng':''
}
}
}
}
这里我将比如http://localhost:3000/plat/users
转发到http://localhost:9200/users
的接口地址。
二、前端项目通过nginx启动
可以修改nginx的反向代理配置,如下:
server {
listen 7890;
server_name localhost;
location /local-resource/ {
proxy_pass http://localhost:9200/resource;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header isLocal "IS_LOCAL";
}
location /plat/ {
proxy_pass http://localhost:9200/;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
这样就将http://localhost:7890/local-resource?agent=SQM
的地址代理到http://localhost:9200/resource?agent=SQM
。