Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前端处理)

目录

1. 修改配置文件(.env.development/.env.production)2. 修改vue.config.js文件3. 新建requestNew.js文件4. 新增接口文件使用示例

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>

本文链接：https://www.kjpai.cn/news/2024-03-27/149353.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！