Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前后端处理)

纯前端处理见这篇文章
Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前端处理)

后端处理跨域一般采用全局跨域处理，或者使用@CrossOrigin单独接口跨域处理
本文主要讲使用@CrossOrigin处理跨域，及Ruoyi-Vue项目前端配置

示例说明

前端地址：http://192.168.1.119
后端地址：http://192.168.1.119:8180

1. 服务端项目处理

在想要允许跨域的处理类上新增 @CrossOrigin注解，注意不要使用@RequestMapping等注解

@RestController
// 支持配置多个域名，如@CrossOrigin(origins = {"http://localhost:8080", "http://localhost:8081"}, allowedHeaders = "*")
@CrossOrigin(origins = "http://192.168.1.119<<前端地址>>", allowedHeaders = "*")
//@RequestMapping("api")
public class OpenApi {

	@GetMapping("/car/list")
    public void list() {
    	...
    }
}

2. 前端项目(Ruoyi-Vue)处理

2.1 配置文件(.env.development、.env.production)新增服务端地址

# 服务域名
VUE_APP_API_SERVICE_URL='http://192.168.1.119:8180'

2.2 仿照request.js新增request.js文件

import axios from "axios";
import { Message } from "element-ui";
import { tansParams } from "@/utils/ruoyi";
import cache from "@/plugins/cache";

// 默认请求头
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

// 创建axios实例
const service = axios.create({
  // 超时
  timeout: 10000,
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;

    // get请求映射params参数
    if (config.method === "get" && config.params) {
      let url = config.url + "?" + tansParams(config.params);
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    if (
      !isRepeatSubmit &&
      (config.method === "post" || config.method === "put")
    ) {
      const requestObj = {
        url: config.url,
        data:
          typeof config.data === "object"
            ? JSON.stringify(config.data)
            : config.data,
        time: new Date().getTime(),
      };
      const sessionObj = cache.session.getJSON("sessionObj");
      if (
        sessionObj === undefined ||
        sessionObj === null ||
        sessionObj === ""
      ) {
        cache.session.setJSON("sessionObj", requestObj);
      } else {
        const s_url = sessionObj.url; // 请求地址
        const s_data = sessionObj.data; // 请求数据
        const s_time = sessionObj.time; // 请求时间
        const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
        if (
          s_data === requestObj.data &&
          requestObj.time - s_time < interval &&
          s_url === requestObj.url
        ) {
          const message = "数据正在处理，请勿重复提交";
          console.warn(`[${s_url}]: ` + message);
          return Promise.reject(new Error(message));
        } else {
          cache.session.setJSON("sessionObj", requestObj);
        }
      }
    }
    return config;
  },
  (error) => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (error) => {
    console.log("err" + error);
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({ message: message, type: "error", duration: 5 * 1000 });
    return Promise.reject(error);
  }
);

export default service;

2.3 新增接口文件

import request from "@/utils/requestOrigin";

const URL = process.env.VUE_APP_API_SERVICE_URL;

// 查询列表
export function getCarList() {
  return request({
    url: URL + "/car/list",
    method: "get",
  });
}

使用示例

使用方法跟引入其他接口js文件一致

import { getCarList } from "@/api/../..";

methods: {
    /** 调用第三方接口 */
    getList() {
      getCarList().then((res) => {
        console.log(res);
      });
    },
}