Vue3 跨域配置生效失败，问题出在哪？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Vue3 跨域配置生效失败，问题出在哪？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

vue3 跨域配置仍然无效？

问题：

用户按照文档配置了 .env 文件、api、config.ts，但是跨域请求仍然无法通过代理。配置如下：

• .env 文件：

  vite_port=172
  vue_app_api_host=localhost

• api 使用：

  axios.get(`/interface/test`);

• config.ts：

  config.ts
  createProxy: {
  '/interface': {
    target: `http://${process.env.VUE_APP_API_HOST}:${process.env.VITE_PORT}`,
    changeOrigin: true,
    ws: true,
    secure: false
  }
  }

解答：

根据问题描述，配置中可能存在以下问题：

• 检查你的 createproxy 方法和 axios 是否配置了 baseurl。如果没有配置，则请求将直接发送到目标 url，而不会经过代理。
• 将第一个规则 /interface 修改为 /。这样做可以让所有请求都经过代理。

如果仍然无法通过代理，请检查：

• vite_port 环境变量是否与 baseurl 中的端口一致。如果端口不一致，则请求将直接发送到目标 url，而不会经过代理。

今天关于《Vue3 跨域配置生效失败，问题出在哪？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！