Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口(前端處理方法)
Ruoyi-Vue項(xiàng)目請(qǐng)求不同地址的接口,主要在于處理跨域問(wèn)題,即vue.config.js文件處理
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"; // 查詢列表 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)文章
vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue如何使用媒體查詢實(shí)現(xiàn)響應(yīng)式
這篇文章主要介紹了vue如何使用媒體查詢實(shí)現(xiàn)響應(yīng)式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動(dòng)端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動(dòng)調(diào)整布局的方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12前端vue2使用國(guó)密SM4進(jìn)行加密、解密具體方法
SM4是一種對(duì)稱加密算法,類似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫(kù)加密、網(wǎng)絡(luò)通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關(guān)于前端vue2使用國(guó)密SM4進(jìn)行加密、解密的相關(guān)資料,需要的朋友可以參考下2024-07-07解決vue-cli單頁(yè)面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問(wèn)題
今天小編就為大家分享一篇解決vue-cli單頁(yè)面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08uni-app中app和webview的h5通信簡(jiǎn)單步驟
這篇文章主要介紹了如何在nvue頁(yè)面中使用webview組件,并詳細(xì)介紹了如何在h5項(xiàng)目中安裝和配置npmiy_uniwebview插件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02