为什么会跨域
- 原因: 浏览器受同源策略的保护 必须是 域名 端口 协议 全部相同才可以正常发请求
例如下图
- 但是 你不可以直接把 基地址改为 localhost:9528 因为 如果 再次运行调用 就会变成localhost:9529 ,localhost:9530 ......... 脚手架服务器的地址会变
- 所以 这个基地址不能写死!!!
解决方法:
去到写基地址的地方 然后将路径 改为 /api 这样就可以实现 不管脚手架服务器地址怎么变 都会拼接到基地址 因为 '/api' 就是相对路径
此时基地址已经做了环境变量处理
/* 这是 封装基地址 */
const _axios = axios.create({
baseURL: process.env.VUE_APP_URL
})
/* 这是 环境变量中的 写法 记得配置环境变量 .env文件*/
VUE_APP_URL = '/api'
- 配置好基地址 后 我们上面图片的第一条线就走通了
- 然后我们应该告诉 脚手架服务器 我们要请求的基地址是 localhost:3000
- 第一步 : 我们要去到 vue.config.js 文件中 找到 devServer 在他里面写上 代理(proxy) 然后我们要针对 /api 做处理 只要是/api的 就开始做代理 但是不一定是/api 看情况自己处理
devServer 在他里面写上 代理(proxy
devServer: {
// 开发环境服务器配制
port: 1234, // 端口号
open: true, // 自动打开浏览器
overlay: {
warnings: false,
errors: true
},
/* proxy是代理 */
proxy: {
/* 你的基地址后面不一定是 /api 所以看情况写 */
'/api':{
target: 'localhost:3000/api' //原本的基地址是 localhost:3000/api
/* 内部规则:用target+/api(代理的值) 作用最终基地址 */
pathrewrite:{ /* 这个方法是 不让他拼接 不让上面的内部规则执行 所以最终的基地址就是 http://localhost:3000/api */
'^/api': '' //这里的意思就是 将/api改为空 就可以去掉一个/api了
}
}
}
// before: require('./mock/mock-server.js')
},
- 这时候 上面大图的第二条线 也跑通了 这时候就会自动 3 4 线往回跑 就可以解决 跨域问题了
温馨提示 改完配置 要重新启动脚手架
跨域 代理解决 进阶
- 以上的前提条件是 接口能正常调用的情况下 如何让 '/api'不写死 而是写成process.env.VUE_APP_URL?? 且 如何让对象内添加以变量为名的 k 值
错误写法!!!!!
devServer: {
// 开发环境服务器配制
port: 1234, // 端口号
open: true, // 自动打开浏览器
overlay: {
warnings: false,
errors: true
},
/* proxy是代理 */
proxy:{
'process.env.VUE_APP_URL':{ 如果是这样的话 是不可以的 因为他属于字符串了 这样写是错误的❌
target: 'localhost:3000/api'
pathrewrite:{
'^/api': '' //这里的意思就是 将/api改为空 就可以去掉一个/api了
}
}
}
// before: require('./mock/mock-server.js')
},
正确写法!!!!
一个对象内 想要加入一个 变量的值
第一种写法:---> obj:{}中 想要加入 let a = 1---> obj[a] = 1 ---> 打印obj--->{ a:1 }
第二种写法:--->obj2:{} 中加入 let a2 = 2---> obj2= { [a2]:2 }
devServer: {
// 开发环境服务器配制
port: 1234, // 端口号
open: true, // 自动打开浏览器
overlay: {
warnings: false,
errors: true
},
/* proxy是代理 */
proxy:{
[process.env.VUE_APP_URL]:{
target: process.env.VUE_APP_TARGET //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
pathrewrite:{
['^'+ process.env.VUE_APP_URL]: '' //这里的意思就是 将/api改为空 就可以去掉一个/api了
}
}
}
},
- 进阶写法 的好处是什么? 好处就是 以后修改 直接去对应的.env文件中修改就好了 不用东改一下西改一下
可写 可 不写 简化代码的作用
如果下面 不写 pathrewrite 这个对象 我们需要做些什么??
proxy:{
[process.env.VUE_APP_URL]:{
target: process.env.VUE_APP_TARGET //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
}
}
首先 搞清楚 target的内部规则是 将代理的值和 target做拼接 也就是
target: process.env.VUE_APP_TARGET 拼接 [process.env.VUE_APP_URL]
所以我们要做的是
一: 去.env文件中 将基地址改为 你代理的值 例如---> VUE_APP_URL = '/api'--这样就可以直接拼接上去了
二: 在.env文件中 将新设置的基地址 VUE_APP_TARGET = 'http://localhost:3000' 去掉/api
这样就可以 最后只加一个 代理值了