Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)
更新時間:2024年05月25日 11:44:06 作者:技術用戶
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關于Ruoyi-Vue處理跨域問題同時請求多個域名接口的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
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) {
// 創(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>總結
到此這篇關于Ruoyi-Vue處理跨域問題同時請求多個域名接口文章就介紹到這了,更多相關Ruoyi-Vue處理跨域請求多個域名接口內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
解決vue-cli單頁面手機應用input點擊手機端虛擬鍵盤彈出蓋住input問題
今天小編就為大家分享一篇解決vue-cli單頁面手機應用input點擊手機端虛擬鍵盤彈出蓋住input問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08

