vue3的跨域问题配置

最新推荐文章于 2025-04-07 15:10:04 发布

侠客v

最新推荐文章于 2025-04-07 15:10:04 发布

阅读量6.6k

点赞数 6

分类专栏：技术难题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Memory_2020/article/details/125831848

版权

技术难题专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue项目中如何通过vue.config.js配置webpack实现跨域，以及在main.js中设置axios的基础用法，包括设置默认请求基地址和将axios挂载到原型对象上。示例代码详细展示了如何进行代理配置以访问不同域的API，并提供了发送POST请求的例子。

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

1、在vue.config.js文件中配置webpack

// 跨域配置
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devServer: {
      proxy: {
        "/api": {//捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
          target: "http://localhost:8090/",//代理的api地址，就是要跨域的地址
          changeOrigin: true,// 这个参数可以让target参数是域名
          ws: true,//是否启用websockets，用不到可设为false
          pathRewrite: {//对路径匹配到的字符串重写
            "^/api": "",
          },
        },
      },
    },
  },
});

2、在main.js中设置axios

import axios from "axios"
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.mount('#app')

//设置axios请求的地址默认是'/api'
axios.defaults.baseURL = "/api";

//将axios挂载到原型对象上
app.config.globalProperties.$http = axios;

3、使用

配置结束，这样就可以使用后端不同域发来的请求了

//此处会拼接成/api/user/login，等效于与后端http://localhost:8090/user/login
this.$http.post("user/login").then((res) => {
   console.log(res);
}) .catch((res) => {
    console.log(res);
});

喜欢的给个赞吧！