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

目录

• • • 1. 修改配置文件(.env.development/.env.production)
    • 2. 修改vue.config.js文件
    • 3. 新建requestNew.js文件
    • 4. 新增接口文件
    • 使用示例

      Ruoyi-Vue项目请求不同地址的接口，主要在于处理跨域问题，即vue.config.js文件处理

      1. 修改配置文件(.env.development/.env.production)

      # 第三方服务VUE_APP_API_SERVICE='/service'

      2. 修改vue.config.js文件

      即新增一个代理。部署项目时，如果使用nginx等代理方式，记得配置VUE_APP_API_SERVICE对应的路径及跳转地址

      devServer: {    host: "0.0.0.0",    port: port,    open: true,    proxy: {      [process.env.VUE_APP_BASE_API]: {        target: `http://localhost:8080`,        changeOrigin: true,        pathRewrite: {          ["^" + process.env.VUE_APP_BASE_API]: "",        },      },      // ===========这里是新增的==============      [process.env.VUE_APP_API_SERVICE]: {        target: "http://47.100.25.xxx:8080",//        changeOrigin: true,        pathRewrite: {          [process.env.VUE_APP_API_SERVICE]: "",        },      },      // ===========这里是新增的==============    },    disableHostCheck: true,  },

      3. 新建requestNew.js文件

      封装请求处理，可参照原版Ruoyi的封装请求

      import axios from "axios";export function requestService(config) {  // 创建axios实例  const instance = axios.create({    baseURL: process.env.VUE_APP_API_SERVICE,    timeout: 5000,  });  // 请求响应拦截  instance.interceptors.response.use((res) => {    return res.data;  });  // 发送请求  return instance(config);}

      4. 新增接口文件

      参考api下的接口文件配置

      import request from "@/utils/requestNew";// 查询列表export function getCarList() {  return request({    url: "/car/list",    method: "get",  });}

      使用示例

            测试  import { getCarList } from "@/api/../..";methods: {    /** 调用第三方接口 */    getList() {      getCarList().then((res) => {        console.log(res);      });    },}