Ruoyi-Vue处理跨域问题同时请求多个域名接口(前端处理方法)
作者：技术用户
跨域问题一直都是很多人比较困扰的问题,这篇文章主要给大家介绍了关于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) {
// 创建axios实例
const instance = axios.create({
baseURL: process.env.VUE_APP_API_SERVICE,
timeout: 5000,
});
// 请求响应拦截
instance.interceptors.response.use((res) => {
return res.data;
});
// 发送请求
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处理跨域请求多个域名接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！