vue-webpack项目本地开发环境设置代理解决跨域问题
前言：
一般跨域问题只要后端配置好的话，是不需要前端做处理的，但也不能保证你遇到的所有后端都能很好的处理这个问题，这个时候可能就需要前端设置代理解决这个问题了。
配置方法：
1. config/index.js
proxyTable: {
‘/api‘: {
target: ‘http://192.168.8.8:8080‘, // 要访问接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
‘^/api‘: ‘‘//重写接口访问
}
}
},
host: ‘localhost‘,//本机Ip或localhost
注意：/api一定要有，命名可以不一样。
网络请求封装文件：
//baseUrl本地访问直接用代理，其他环境用配置域名
axios.defaults.baseURL = location.href.indexOf("localhost") > 0 ? "api" : server.DOMIN
如上，如果是本地环境，则直接使用本地代理（这时就跟server.js配置的域名就无关了），否则使用对应环境配置的服务器地址。
后记：
最近一个项目出现跨域问题，后端未能段短时间内处理，所以就不等了，前端改改代码先联调吧。配置过程中发现无法支持https（虽然配置中有secure 这个配置，貌似没用）。
如非必须，不建议前端做代理，原则上前端可以根据运行环境自动选择对应环境的服务器地址，只要和后端约定好，可以做到一次打包，同事支持开发、测试、生产等多种环境的，无需每次打包都要改域名，不仅麻烦，还容易出错。
踩
(0)
赞
(0)
举报
评论 一句话评论（0）
分享档案
最新文章
教程昨日排行