本节目标: 通过配置vue-cli的代理解决跨域访问的问题
为什么会出现跨域？
由于浏览器同源策略的限制，当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域
我们现在的项目前后端状态如下图所示，前端项目运行在http://localhost:8888，而接口运行在https://heima.xxx.com，必定是出现跨域的
怎么解决这种跨域 ？
请注意，我们所遇到的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的
- 后台设置cors=> 后台改请求header=》*
- 前台设置代理访问 =》设置后台代码服务器帮咱们请求=》把数据返给前端
解决开发环境的跨域问题
开发环境的跨域
开发环境的跨域，也就是在**vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求**,解决跨域问题
这就是vue-cli配置webpack的反向代理=> 后台代码环境中发请求不存在跨域问题
采用vue-cli的代理配置
vue-cli的配置文件即**vue.config.js**,这里有我们需要的 代理选项
module.exports = {
devServer: {
// 代理配置
proxy: {
// 表示如果我们的请求地址有/api的时候,就出触发代理机制
// http://localhost:8888/api/login -> http://www.baidu.com/api/login
// 接口域名发生变化 其余地址保持不变
'/api': {
target: 'www.baidu.com', // 我们要代理的真实接口地址
changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
// 路径重写
// 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
// 比如 我们想把请求的api去掉（真实后台没有api前缀情况）
// localhost:8888/api/login -> www.baidu.com/login
pathRewrite: {
'^/api': ''
}
}
}
// end
}
}
注意：pathRewrite选项在后台没有统一前缀情况下使用，用于去除前端临时添加的/api前缀
接下来,我们在本地项目配置代理访问
- 配置代理
// 代理跨域的配置
proxy: {
// 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
'/api': {
target: 'http://ihrm-java.itheima.net', // 跨域请求的地址
changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域(默认true)
}
}
- 修改环境配置文件baseURL
- 上面的代理转发服务配置好之后，我们就得去修改我们现在的baseURL了，因为它还是直接写死的后端api地址，我们需要把它改成中间服务器的地址，才能OK对不对？那看着下面的架构图思考下，我们现在的baseURL修改为什么呢？
.env.development
.env.development
- VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api'
+ VUE_APP_BASE_API = '/api'
- 重新执行
npm run dev重启项目，查看接口调用效果
注意:
- vue.config.js文件属于项目的配置文件，每次有修改之后都要重启项目让配置生效
- 配置了proxy之后，需要把本地的环境变量文件中的绝对路径变成相对路径
/api
\
