baseURL 多重跨域 ( 含 jeecg-boot 项目 )

普通项目多重跨域请直接看 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
        })

跨域成功

结束，完结撒花。