关于vue.config.js配置其他网址的跨域

原创于 2024-03-21 09:57:41 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了如何在Vue项目中使用vue.config.js配置devServer的proxy，实现对不同API地址的转发，以及如何在接口模块中设置baseURL以访问这些代理。

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

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 项目地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 去除请求路径中的"/api"部分
        }
      },
      '/otherApi': {
        target: 'http://another-api.example.com', // 将此处的URL更换为其他API地址
        changeOrigin: true,
        pathRewrite: {
          '^/otherApi': '' // 去除请求路径中的"/otherApi"部分
        }
      }
    }
  }
}

接口

export const reqOtherData = (data) => {
  return request({
  	//request文件都有配置好baseURL，
  	//可以单独配置baseURL，来访问其他网址的接口
    baseURL: '/otherApi', 
    url:"/example/example/example",
    method:"get",
    params:data
  });
};