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) {
  // 创建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处理跨域请求多个域名接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue如何使用媒体查询实现响应式

    vue如何使用媒体查询实现响应式

    这篇文章主要介绍了vue如何使用媒体查询实现响应式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue如何实现pc和移动端布局详细代码

    vue如何实现pc和移动端布局详细代码

    这篇文章主要给大家介绍了关于vue如何实现pc和移动端布局的相关资料, Vue响应式布局适配是一种根据设备特性自动调整布局的方法,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue打包上传服务器刷新404问题的两种方案

    vue打包上传服务器刷新404问题的两种方案

    这篇文章主要给大家介绍了关于vue打包上传服务器刷新404问题的两种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue-router启用history模式下的开发及非根目录部署方法

    vue-router启用history模式下的开发及非根目录部署方法

    这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 前端vue2使用国密SM4进行加密、解密具体方法

    前端vue2使用国密SM4进行加密、解密具体方法

    SM4是一种对称加密算法,类似于AES,主要用于数据的批量加密,如文件加密、数据库加密、网络通信数据加密等,这篇文章主要给大家介绍了关于前端vue2使用国密SM4进行加密、解密的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue3实现密码输入框效果的示例代码

    vue3实现密码输入框效果的示例代码

    这篇文章主要为大家详细介绍了如何利用vue3实现6位的密码输入框效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    今天小编就为大家分享一篇解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • uni-app中app和webview的h5通信简单步骤

    uni-app中app和webview的h5通信简单步骤

    这篇文章主要介绍了如何在nvue页面中使用webview组件,并详细介绍了如何在h5项目中安装和配置npmiy_uniwebview插件,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02

最新评论