Vue axios跨域解决
时间: 2023-11-11 09:57:55 浏览: 127
Vue项目中跨域问题解决方案
5星 · 资源好评率100%
在Vue中使用axios发送跨域请求,可以通过以下步骤解决:
1. 安装axios:在项目中使用axios前,需要先安装它。可以通过以下命令在项目中安装axios:
```
npm install axios
```
2. 创建一个代理:在Vue的配置文件`vue.config.js`中,可以使用`devServer`选项配置一个代理来解决跨域问题。如果你的后端接口地址是`http://api.example.com`,可以使用如下的配置来创建一个代理:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
这样,以`/api`开头的请求会被代理到`http://api.example.com`。
3. 在Vue组件中使用axios:在Vue组件中使用axios发送请求时,只需要将请求的URL修改为代理的URL即可。例如,原本的请求地址是`http://api.example.com/users`,修改后的地址应该是`/api/users`。
现在,你可以在Vue中使用axios发送跨域请求了。
阅读全文