vue项目前端开发环境请求跨域，配置proxy代理服务_vue开发环境配置跨域proxy

一、问题描述

部分接口后端没有添加开发环境地址到白名单，访问出现跨域问题，无法进行接口调试，遂使用proxy。
版本是vue2+vue-cli4.5

二、思路

1、开发环境配置代理服务，请求本地的服务，再通过本地服务和其他源的服务器通信
2、若是生产环境下，需要再配置反向代理，把target地址换反向代理后的地址

三、实现

1、axios的baseurl为空，触发代理服务
1、axios中的url匹配到给定字符串‘/api’时，请求地址变为代理服务地址

env.development中baseurl写空

VUE_APP_HTTP2_BASE_URL=
1

vue,.config.js中在devServer下配置

proxy: {
  '/rdapi': {
    target: 'https://www.xxxx.com', // 请求时出现跨域的地址
    secure: true,  // 如果是https接口，需要配置这个参数
    changeOrigin: true //设置为true代理服务器此时会根据请求的 target 地址修改 Host。
  }
}
1
2
3
4
5
6
7

封装axios请求的时候，URL写入包含‘/api’的接口名

  const api2 = axios.create()
  const { appId: app_id, appSecret: app_secret } = this.$config.http2
  const { data: token } = await api2({
    method: 'POST',
    url: '/api/xxxx/xxx',
    data: { app_id, app_secret }
  })
1
2
3
4
5
6
7

这个时候请求地址变本地的