项目的开发过程中 经常会遇到跨域的问题
- 跨域: 浏览器往服务器发送请求的时候
–域名 端口 地址都相同才可以 不然就是跨域
- 解决方案一般是后端配置cors请求头为* 允许跨域
– 还有一种方式就上去前端配置反向代理进行跨域
–重点: 服务器向服务器发送请求是不会跨域的
– 所以遇到了跨域 就需要用本地的服务器去发请求
在开发vue项目的时候 webpack都会给我们开启一个本地服务器
- 所以可以通过webpack的配置去配置本地服务器
- 在vue.config.js中进行配置
– 在axios里把根地址改成/aa
(随便自己写)
– 因为没有填写地址 所以访问的locahost本地服务器加上/aa
– 这个时候发送请求如果遇到你写的/aa
就会反向代理到target的地址里
– 这个时候 发请求的就是本地服务器了 是本地服务器通过target代理发的请求
devServer:{
proxy: {
'/aa':{ // 如果请求地址里带了/aa 就会代理这台服务器地址
target: '请求根地址', // 但是这样地址上会多一个aa 这样地址不对 也访问不到数据
pathRewrite: {'^/aa':''} // 把代理地址多出来的aa 替换成空 这样就可以访问到数据了
}
}
}