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);
            });
          },
      }