当我们在Vue中使用axios时,有时候会遇到跨域的问题。跨域是指浏览器从一个源网址访问另一个网址的过程,这在Web开发中是非常常见的。如果源地址和请求地址的协议、IP、端口不一样,就会发生跨域的现象。
常见的解决方法有两种:
本文主要说一说第2种方法。
首先我们按照中间代理:
npm install http-proxy-middleware
vue.config.js
添加代码// 全部请求都请求到 <http://localhost:4000>
module.exports = {
devServer: {
proxy: '<http://localhost:4000>'
}
}
// <http://localhost:8925/api/all> 回变成 <http://localhost:4000/all>
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<http://localhost:4000>', // 你要代理的地址,这里以本地API服务器为例
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': '' // 重写路径,去掉路径中的/api
}
}
}
}
}