在Vue3中使用vite配置proxy实现跨域请求

boldiy

于 2024-04-08 14:03:43 发布

阅读量838

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/boldiy/article/details/137506917

本文介绍了如何在Vite项目中使用vite.config.ts配置proxy代理，以便通过axios从本地开发环境安全地向外部后端服务（如http://www.baidu.com/api/）发送POST请求。重点展示了设置headers以进行身份验证和跨域访问的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目根目录中找到vite.config.ts文件，配置以下代理：
```
export default defineConfig({
server: {
proxy: {
'/page': {
target: 'http://www.baidu.com/api/', // 目标服务器地址
changeOrigin: true, // 启用代理时，改变源地址
headers: {
"Authorization": "bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAi" //设置请求报头
}
}
}
},
})
```

调用方法：
```
axios.post('http://localhost:5173/page', {
headers: {
"Content-Type": "application/json",
}
})
.then((data: any) => {
console.log(data);
})
```

相当于请求了后端服务接口：http://www.baidu.com/api/page