vue.config.js里解决跨域详解(vue-cli 3.0+)
@vfsTOC今天下午上班没啥事。研究了下config文件,心得体会如下,给还不太清楚如何在config文件中设置跨域的同学参考参考,不对的地方,欢迎指正。module.exports = {publicPath: '/',// 项目部署的基础路径 我们默认假设你的应用将会部署在域名的根部outputDir: 'dist',// 构建好的文件的输出地址...
·
今天下午上班没啥事。研究了下config文件,心得体会如下,给还不太清楚如何在config文件中设置跨域的同学参考参考,不对的地方,欢迎指正。
module.exports = {
publicPath: '/', // 项目部署的基础路径 我们默认假设你的应用将会部署在域名的根部
outputDir: 'dist', // 构建好的文件的输出地址
assetsDir: 'static', // 静态资源打包的地址
lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存时使用‘eslint-loader’进行检查
// 有效值: true | false | 'error' ,设置为error时,检查出的错误会触发编译失败
productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 映射文件 打包时使用
devServer: { // 设置跨域
port: '9527', // 端口号
open: true, // 配置自动启动浏览器
overlay: {
warnings: false,
errors: true
},
proxy: { // 代理服务器设置
/**
* 原理理解: 假设我的本地地址为: http://192.168.163.100:9527 (即http://localhost:9527)
* 服务器地址为: http://11.12.11.205:9301;
* 该服务器上的接口为:/api/xxx/xxx
* 如果我通过axios将接口直接写成
* axios.get(http://11.12.11.205:9301/api/xxx/xxx)
* 那么这个时候从http://192.168.163.100:9527 到 http://11.12.11.205:9301/api/xxx/xxx
* 是存在跨域限制的。
*
* 所以,项目中在设置axios时是这样做的
* 1. 设置了一个baseURL 为process.env.VUE_APP_BASE_API, 这里我设置的值是'/my_test_proxy'
* (process.env.VUE_APP_BASE_API这个环境变量的可以在项目的.env.development文件里配置,
* 代表调试环境,这个可以自己随意设置一个字符串,最好是复杂一点,能够做到标识,
* 在.env.production里面将这个变量设置为'',生产环境的url就不会带这个变量了。
* 这里我们跨域设置都讨论的是调试环境,在生产环境就要通过服务器的nginx配置了,
* 这里不作讨论)
* 2. 将axios的接口写成 baseURL+ 接口路径,即 /my_test_proxy +/api/xxx/xxx
* (axios会在url前面加上配置的baseURL,这个在axios官网有说明)
* 3.请求的时候 浏览器上显示的是http://localhost:9527/my_test_proxy/api/xxx/xxx
* 4.因为有config里面的代理设置,即遇到'/my_test_proxy',将它前面的地址
* 代理到http://11.12.11.205:9301,并且允许跨域
* 5. 并且将'/my_test_proxy'重写为'',即http://localhost:9527 变为
* 了http://11.12.11.205:9301,'/my_test_proxy'变为了''
* 6. 那么现在请求到的地址变为http://11.12.11.205:9301/api/xxx/xxx
* 7. 即成功代理给我们要访问的服务器,并解决了跨域问题
*/
// process.env.VUE_APP_BASE_API '/my_test_proxy'
[process.env.VUE_APP_BASE_API]: { // 当遇到'/my_test_proxy'的时候
target: `http://11.12.11.205:9301`, // 需要将目前的地址代理至target
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' // 将'/my_test_proxy' 重写为''
}
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)