vue3 + vite 配置跨域请求
时间: 2023-09-02 22:11:58 浏览: 355
在 Vue3 中使用 Vite 进行跨域请求配置的步骤如下:
1. 在 `vite.config.js` 文件中添加以下代码:
```javascript
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理的目标地址
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '') // 将请求路径中的 /api 去掉
}
}
}
}
```
2. 在 Vue3 组件中发起请求时,请求路径前加上 `/api` 前缀,如下:
```javascript
// 发起 GET 请求
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
// 发起 POST 请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'admin', password: '123456' })
}).then(response => response.json())
.then(data => console.log(data))
```
这样配置后,Vite 会自动将请求转发到 `http://localhost:3000` 这个地址,从而实现跨域请求。注意,如果你使用的是 Vue CLI 来搭建项目,则需要在 `vue.config.js` 文件中进行配置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![png](https://img-home.csdnimg.cn/images/20210720083516.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)