Vue3 跨域问题：配置无效？如何正确解决？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Vue3 跨域问题：配置无效？如何正确解决？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

Vue3 跨域问题：配置无效？如何正确解决？插图

vue3 解决跨域问题无效？

在配置 vue3 项目时，跨域问题时常困扰开发者。本文将针对常见的问题根源展开探讨，帮助您解决跨域难题。

问题一：’.env’ 配置无效

您的 ‘.env’ 配置中包含以下信息：

vue_app_base_api=http://172.17.153.245:8732/interface

问题二：接口请求错误

您使用接口请求，但通过的地址却是 172.17.153.245:8732。

问题解析：

解决跨域问题的关键在于以下两点：

代理配置：确保您在 createproxy 方法中正确配置了代理规则，并将 “/interface” 修改为 “/”。
```
createproxy: (config) => {
 config.target = 'http://172.17.153.245:8732';
 config.changeorigin = true;
 return config;
}
```
baseurl 设置：检查您的 axios 是否正确设置了 baseurl。您的 baseurl 应该与您的 ‘.env’ 配置中的 vue_app_base_api 相匹配。
```
const app = createApp(App);
app.config.globalProperties.$axios = axios.create({
 baseURL: 'http://172.17.153.245:8732',
});
```
环境变量一致性：确保您的 vue_port 环境变量与您的 baseurl 中的端口号一致。否则，可能会导致跨域请求失败。

通过上述步骤，您应该可以有效地解决 vue3 跨域问题，确保您的应用正常与后端通信。

好了，本文到此结束，带大家了解了《Vue3 跨域问题：配置无效？如何正确解决？》，希望本文对你有所帮助！关注米云公众号，给大家分享更多文章知识！

近期文章