Ruoyi -vue 若依框架前端跨域访问

总的思路

   创建一个用于第三方平台使用的request拦截器，并定义一个新的path ，最后配置 deserver,其实网上也有很多 对于我这样JAVA开发人员 一下子有点蒙圈，不过摸索一阵子还是解决了。

定义请求第三方平台接口的拦截器

文件名thirdPlatformRequest.js

import axios from 'axios'const thirdPlatformRequest = axios.create({baseURL: '/thirdPlatform-api', timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
thirdPlatformRequest.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
thirdPlatformRequest.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)export default thirdPlatformRequest;

定一个新的Path

这里定义的是 ‘/thirdPlatform-api’

deserver的配置

我使用的若依框架前端还是2x版本所以这段配置时在vue.config.js中，关键代码如下

  devServer: {host: '0.0.0.0',port: port,open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy'/proxy-api': {target: `http://localhost:48080/oca/admin-api`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''// ['www.baidu.com']:''}},'/thirdPlatform-api': {target: `http://bsw.5gkh.org.cn:90/oca/admin-api`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''// ['www.baidu.com']:''}}},disableHostCheck: true

调用

先在在前端业务接口文件中引入，位于src/api下
关键代码如下
import thirdPlatformRequest from “@/utils/thirdPlatformRequest”;

// 获得三维报建申请分页
export function getGtThreeDimensionaleApplyPage(query) {// return request({//   url: '/gantang/gt-three-dimensionale-apply/page',//   method: 'get',//   params: query// })return thirdPlatformRequest({url:'/gantang/gt-three-dimensionale-apply/page',method:'get',params:query});
}

结束语

     个人觉得整个关键就是 baseURL: '/thirdPlatform-api',  定义的拦截器中的baseUrl和 deserver中的proxy 要保持 一致 ，
其他的都参考原来的即可， 第一次记录并发表 如有 错误  还望各位看官见谅。

记录一次若依框架前端跨域访问 ruoyi -vue相关推荐

REST API之前端跨域访问
关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...
前端跨域问题解决方案汇总
下面我以简单的两台node服务器来说明如何使用nginx进行前端跨域访问. node1服务器在localhost:8083上启动 const app = express(); app.get('/w ...
ssm项目解决AJAX跨域,ssm项目跨域访问
最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...
VUe3 @cli(axios)跨域访问
CompC的代码: <template><div><button @click="sendAjax">发送ajax请求</button&g ...
WEB 前端跨域解决方案
跨域定义广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...
iframe 跨域_【梯云纵】搞定前端跨域
韦陀掌法,难陀时间善恶:梯云纵,难纵过乱世纷扰. 现在开始写代码o(╯□╰)o 什么是跨域 1.跨域的定义广义的跨域是指一个域下对的文档或者脚本试图去请求另外一个域下的资源. a链接.重定向.表单提 ...
前端跨域问题汇总及解决方案
"关注前端开发社区 ,回复" 1" 即可加入前端技术交流群,回复 " 2" 即可免费领取500G前端干货! 来源 | https://seg ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...

记录一次若依框架前端跨域访问 ruoyi -vue

总的思路

定义请求第三方平台接口的拦截器

定一个新的Path

deserver的配置

调用

结束语

记录一次若依框架前端跨域访问 ruoyi -vue相关推荐

最新文章

热门文章

记录一次若依框架 前端跨域访问 ruoyi -vue

总的思路

定义请求第三方平台接口的拦截器

定一个新的Path

deserver的配置

调用

结束语

记录一次若依框架 前端跨域访问 ruoyi -vue相关推荐

最新文章

热门文章

记录一次若依框架前端跨域访问 ruoyi -vue

记录一次若依框架前端跨域访问 ruoyi -vue相关推荐