后端分离不可避免会遇到跨域问题,可把我烦的想砍人,现在总结几个解决办法让后人不走歪路
环境:
Vue-cli 4x
本地开发跨域问题 - 配置 devServer
打开根目录的 vue.config.js (没有则创建,vue 以前的版本有的是写在 config/index.js,有的写在 webpack.config.js,4x 版本统一在 vue.config.js),写入:
module.exports = {
devServer:{
host: ‘localhost’, // Vue开发项目启动域名
port: 8080, // 端口
https: false, // 是否是https
open:false,
proxy:{
‘/apiDev’:{
target: ‘http://api.zmxy.com’, // 后端API
changeOrigin: true,
pathRewrite:{
‘^/apiDev’:’’ // 以apiDev作为前缀
}
}
}
}
}
npm run serve 重新编译项目,以 apiDev 开头的 URL 就会自动转发到 api.zmxy.com
axios 使用:
this.axios.
get(’/apiDev/index/index/getDetail’,{
params: {id:id}
})
Nginx 重定向转发防止跨域
编辑 Nginx 配置文件
location /api {
rewrite ^.+api/?(.*)$ /$1 break; //可选参数,正则验证地址
include uwsgi_params; //可选参数,uwsgi是服务器和服务端应用程序的通信协议,规定了怎么把请求转发给应用程序和返回
proxy_pass https://www.api.zmxy.com; // 此处修改为自己的请求地址,必填
}
Copy
重启 Nginx
axios 使用:
this.axios.
get(’/api/index/index/getDetail’,{
params: {id:id}
})