首页vue配置axios跨域代理

vue配置axios跨域代理

时间: 2023-09-11 22:06:16 浏览: 188

要在 Vue 项目中配置 Axios 跨域代理，可以按照以下步骤进行操作： 1. 安装 Axios 和 http-proxy-middleware ``` npm install axios http-proxy-middleware --save ``` 2. 在 `src` 目录下创建一个 `vue.config.js` 文件，并添加以下内容： ```javascript const proxyTable = { '/api': { target: 'http://localhost:3000', // 接口的域名和端口号 changeOrigin: true, // 跨域访问设置，true代表跨域 pathRewrite: { '^/api': '/' // 重写路径 } } } module.exports = { devServer: { // 配置多个代理 proxy: proxyTable } } ``` 3. 在需要使用 Axios 的组件中引入并使用 ```javascript import axios from 'axios' axios.get('/api/data').then((res) => { console.log(res) }) ``` 在这个例子中，我们使用了一个名为 `/api` 的代理，将所有以 `/api` 开头的请求都代理到 `http://localhost:3000`。希望这个回答对你有所帮助！

阅读全文