vue 配置跨域请求

UserGuan

已于 2022-11-22 11:11:29 修改

阅读量444

点赞数

分类专栏： vueJS类文章标签： vue.js 前端

于 2022-11-09 17:35:17 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/127773752

版权

vueJS类专栏收录该内容

34 篇文章 4 订阅

订阅专栏

在Vue项目的vue.config.js和config/index.js中设置代理，实现跨域访问。通过devServer.proxy，将/api路径代理到指定的后端接口地址，允许跨域并重写路径。在config的proxyTable中同样配置'/api'代理，方便本地开发时调用远程API。

摘要由CSDN通过智能技术生成

1、在根目录的 vue.config.js 的 module.exports 中加入以下代码

// 服务器跨域配置
devServer: {
  open: false, // 自动开启浏览器，默认false
  port: 8080, // 设置端口，默认8080
  // 进行代理转发
  proxy: {
    "/api": {
      target: "http://xxx.xx.xx.xx:xxx/", // 后端接口地址
      // secure:true , // 接受对方是https的接口
      changeOrigin: true, // 是否需要跨域，默认true
      pathRewrite: { "^/api": "" }, // 重写路径（重点）
    },
  },
}

2、在 config 的 index.js 配置文件中加入以下代码

proxyTable: {
    // /api可以代理http://localhost:8090/pmsapi
    '/api': {
        target: 'http://localhost:8090/pmsapi', // 后端接口地址
        changeOrigin: true, // 是否允许跨越
        // 路径重写
        pathRewrite: {
            '^/api': '', // 重写，用'/api'代替target里面的地址
        }
    }
}