Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)
Ruoyi-Vue項目請求不同地址的接口,主要在于處理跨域問題,即vue.config.js文件處理
1. 修改配置文件(.env.development/.env.production)
# 第三方服務(wù) VUE_APP_API_SERVICE='/service'
2. 修改vue.config.js文件
即新增一個代理。部署項目時,如果使用nginx等代理方式,記得配置VUE_APP_API_SERVICE對應(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",//<<你想要請求的域名及端口>> 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, }); // 請求響應(yīng)攔截 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: { /** 調(diào)用第三方接口 */ getList() { getCarList().then((res) => { console.log(res); }); }, } </script>
總結(jié)
到此這篇關(guān)于Ruoyi-Vue處理跨域問題同時請求多個域名接口文章就介紹到這了,更多相關(guān)Ruoyi-Vue處理跨域請求多個域名接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12解決vue-cli單頁面手機應(yīng)用input點擊手機端虛擬鍵盤彈出蓋住input問題
今天小編就為大家分享一篇解決vue-cli單頁面手機應(yīng)用input點擊手機端虛擬鍵盤彈出蓋住input問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08