快捷導(dǎo)航

Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口(前端處理方法)

更新時(shí)間：2024年05月25日 11:44:06 作者：技術(shù)用戶(hù)

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

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

# 第三方服務(wù)
VUE_APP_API_SERVICE='/service'

2. 修改vue.config.js文件

即新增一個(gè)代理。部署項(xiàng)目時(shí)，如果使用nginx等代理方式，記得配置VUE_APP_API_SERVICE對(duì)應(yīng)的路徑及跳轉(zhuǎn)地址

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",//<<你想要請(qǐng)求的域名及端口>>
        changeOrigin: true,
        pathRewrite: {
          [process.env.VUE_APP_API_SERVICE]: "",
        },
      },
      // ===========這里是新增的==============
    },
    disableHostCheck: true,
  },

3. 新建requestNew.js文件

封裝請(qǐng)求處理，可參照原版Ruoyi的封裝請(qǐng)求

import axios from "axios";

export function requestService(config) {
  // 創(chuàng)建axios實(shí)例
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_SERVICE,
    timeout: 5000,
  });

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

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

4. 新增接口文件

參考api下的接口文件配置

import request from "@/utils/requestNew";

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

使用示例

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

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

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

總結(jié)

到此這篇關(guān)于Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口文章就介紹到這了,更多相關(guān)Ruoyi-Vue處理跨域請(qǐng)求多個(gè)域名接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Nuxt3:拉取項(xiàng)目模板失敗問(wèn)題以及解決
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時(shí)遇到的問(wèn)題,通過(guò)分析命令,推測(cè)問(wèn)題出在拉取項(xiàng)目模板失敗,解決方法是手動(dòng)訪問(wèn)并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴(lài)并啟動(dòng),最終成功解決問(wèn)題
2024-12-12
Vue數(shù)據(jù)驅(qū)動(dòng)試圖的實(shí)現(xiàn)方法及原理
當(dāng)Vue實(shí)例中的數(shù)據(jù)（data）發(fā)生變化時(shí),與之相關(guān)聯(lián)的視圖（template）會(huì)自動(dòng)更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動(dòng)視圖是通過(guò)其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動(dòng)視圖實(shí)現(xiàn)的核心原理,需要的朋友可以參考下
2024-10-10
vue+flv.js+SpringBoot+websocket實(shí)現(xiàn)視頻監(jiān)控與回放功能
vue+springboot的項(xiàng)目,需要在頁(yè)面展示出?？档挠脖P(pán)錄像機(jī)連接的攝像頭的實(shí)時(shí)監(jiān)控畫(huà)面以及回放功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-02-02
vue中的el-button樣式自定義方式
這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue PC端實(shí)現(xiàn)掃碼登錄功能示例代碼
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過(guò)使用手機(jī)APP上的掃一掃功能去掃頁(yè)面二維碼圖片進(jìn)行登錄，使得用戶(hù)登錄操作更方便，安全，快捷，這篇文章主要介紹了Vue PC端如何實(shí)現(xiàn)掃碼登錄功能,需要的朋友可以參考下
2023-01-01
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)的效果，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-05-05
Vue-router中path的設(shè)置方式
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue 實(shí)時(shí)監(jiān)聽(tīng)窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實(shí)時(shí)監(jiān)聽(tīng)窗口變化 windowresize的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11