Vue 跨域问题解决办法 Vue 配置防止跨域 nginx 重定向防止跨域
前后端分离不可避免会遇到跨域问题,可把我烦的想砍人,现在总结几个解决办法让后人不走歪路
环境:
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.com; // 此处修改为自己的请求地址,必填 }
- 重启Nginx
axios使用:this.axios. get('/api/index/index/getDetail',{ params: {id:id} })
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: