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

vue3 解决跨域问题无效？

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

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

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

vue_app_base_api=http://172.17.153.245:8732/interface

问题二：接口请求错误

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

问题解析：

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

1. 代理配置：确保您在 createproxy 方法中正确配置了代理规则，并将 "/interface" 修改为 "/"。

   createproxy: (config) => {
    config.target = 'http://172.17.153.245:8732';
    config.changeorigin = true;
    return config;
   }

2. 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',
   });

3. 环境变量一致性：确保您的 vue_port 环境变量与您的 baseurl 中的端口号一致。否则，可能会导致跨域请求失败。

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

以上就是Vue3 跨域问题：配置无效？如何正确解决？的详细内容，更多请关注硕下网其它相关文章！