vue-cli 中集成的跨域解决方案
思路：
在vue.config.js配置文件中，有一项是devServer
module.exports = {
devServer: {
// 代理配置
proxy: {
// 这里的 api 表示如果我们的请求地址以 /dev_api 开头的时候，就出触发代理机制
'/dev_api': {
target: 'www.xxxxxxx.com', // 需要代理的地址，就是后端服务器地址
changeOrigin: true, // 是否跨域，需要设置此值为 true 才可以让本地服务代理我们发出请求
// 路径重写
pathRewrite: {
// 重新路由 localhost:8888/api/login => www.baidu.com/api/login
'^/dev_api': '/api' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做
}
}
}
}
}
代理转发的原理
-
服务器与服务器之间没有跨域问题
-
在前端项目和目标服务器之间架设一个代理服务器
-
代理服务器向目标服务器发请求
-
代理服务器和前端项目同源