vue解决跨域、api接口重写

vue项目，解决跨域实现前端api接口重写

通过webpack配置vue 的 proxyTable解决跨域,通过port可以重写端口号，通过配置changeOrigin: true解决跨域，通过配置proxy的 pathRewrite实现接口重写。
1、在项目根目录创建”.env.development“和“.env.production”文件

# .env.development文件
// 开发环境
VUE_APP_BASE_API = '/dev-api'

# .env.production文件
// 生产环境
VUE_APP_BASE_API = '/prod-api'

2、配置vue.config.js

let baseUrl = {
  dev: 'http://192.168.10.110:6666/', // 后端api
  pro: 'http://www.xxxx.com:6666'， // 后端api
}
module.exports = {
  devServer: {
    port: '8888',
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.NODE_ENV === 'development' ? baseUrl.dev : baseUrl.pro,
        secure: true, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }
}

配置前 VS 后结果：

	配置前：
	请求网址: http://192.168.10.110:6666/login

	配置后：
	请求网址: http://192.168.10.110:8888/dev-api/login

提示：可能需要后端配合做配置对应的dev-api和prod-api哦！
写博不易，如果对你有帮助，请点赞支持一下！！！