vue3配置跨域问题

引用提到了解决Vue项目中跨域问题的方法，可以根据这个参考进行配置。首先，在项目的根目录下创建一个vue.config.js文件，如果已经存在就直接编辑该文件。然后在该文件中添加以下代码来配置跨域：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8090', // 后端接口的域名
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 将/api替换为空字符串，去掉/api前缀
        },
      },
    },
  },
};

在上述代码中，我们使用了代理功能来解决跨域问题。将需要访问的后端接口的域名配置为target，同时将请求路径中的/api前缀替换为空字符串。这样，在前端代码中发起请求时，就可以直接使用相对路径，而不需要写完整的后端接口地址。

接下来，在Vue组件中发起跨域请求时，只需要使用相对路径即可。例如，如果要发起一个登录请求，可以这样写：

this.$http.post("/api/user/login").then((res) => {
  console.log(res);
}).catch((res) => {
  console.log(res);
});

这样配置之后，就可以解决Vue3项目中的跨域问题了。请注意，根据你的实际情况，需要将target的值更改为你的后端接口的域名。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue3 前端配置代理解决跨域](https://blog.csdn.net/qq_52697994/article/details/124620850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [springboot vue 跨域问题的解决](https://download.csdn.net/download/weixin_38735570/12755764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue3的跨域问题配置](https://blog.csdn.net/Memory_2020/article/details/125831848)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]