Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)

更新時間：2024年05月25日 11:44:06 作者：技術用戶

跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關于Ruoyi-Vue處理跨域問題同時請求多個域名接口的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

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) {
  // 創(chuàng)建axios實例
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_SERVICE,
    timeout: 5000,
  });

  // 請求響應攔截
  instance.interceptors.response.use((res) => {
    return res.data;
  });

  // 發(fā)送請求
  return instance(config);
}

4. 新增接口文件

參考api下的接口文件配置

import request from "@/utils/requestNew";

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

使用示例

<template>
  <div class="app-container">
    <el-button @click="getList">測試</el-button>
  </div>
</template>

<script>
import { getCarList } from "@/api/../..";

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