普通项目多重跨域请直接看 vue.config.js 添加跨域

jeecg-boot 项目

前言

最近公司使用 jeecg-boot 低代码平台做项目，总体来说项目功能很多，上手容易，但想改动项目框架，还是挺困难的。

最近因为，有部分业务需要去调用另外一个平台的接口，所以需要实现多跨域。

之前项目拉去下来也没认真读配置文件，只是改了简单的地址 就是用了，这次配置多重跨域在网上搜了很久，发现都不能用，本人对前端不熟悉，摸索实现成功跨域，如有错误还忘指正。

首先说个大坑，就是 env 配置文件，以.env.development为例。当时项目啦取下来配置如下

NODE_ENV=development
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

当时就将 VUE_APP_API_BASE_URL 改为本机地址就可以直接使用，将baseURL 设置为了http://localhost:8080/jeecg-boot

config\index.js

request.js

最终将 baseURL 设置为了http://localhost:8080/jeecg-boot ，相信熟悉vue的已经知道怎么改了，使用脚手架新建的项目会有一个默认的 baseURL =’/api’，按照传统的跨域不能解决

地址

前端项目运行地址

http://localhost:3000/

两个平台接口地址（现在接口都是 resultul 风格，和语言无关，写个Java、node为了分辨是两个跨域接口，我这个本地测的，两个端口号和项目运行端口号不同所有存在跨域）
Java接口

http://localhost:3000/jeecg-boot/power/searchEsn

node接口

http://localhost:9000/getData/select_table?id=sx

通用项目

解决办法

1、修改 env 配置，以 开发环境为例（这一步针对 jeecg-boot 项目）

NODE_ENV=development
VUE_APP_API_BASE_URL=/jeecg-boot

2、vue.config.js 添加跨域

跨域配置如下

  devServer: {port: 3000,proxy: {'jeecg-boot/node': { target: 'http://localhost:9000', changeOrigin: true, pathRewrite: {'^/jeecg-boot/node': ''}},'jeecg-boot': {target: 'http://localhost:8089', //请求本地 需要jeecg-boot后台项目changeOrigin: true,}}},

注意：

• 一定要将 jeecg-boot/node 写在上面，因为代码从上往下执行，保证可以i匹配到 jeecg-boot/node
• 浏览器控制台调用接口地址一直是 http://localhost:3000/，不是你配置的跨域地址
  Java接口 的 axios 如下

 this.axios.post("/power/searchPower").then(res => {this.n = res.data})

跨域成功

node接口 的 axios 如下

this.axios.get("/node/getData/select_table?id=sx").then(res => {this.n = res.data})

跨域成功

结束，完结撒花。