在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢?

React框架里处理跨域问题,可以使用http-proxy-middleware库解决。

http-proxy-middleware可实现全局设置,将客户端请求转发到目标服务器,从而实现代理服务器功能,进而解决模块化前端跨域访问的问题。

本文基于SpringBoot+React环境进行说明。

1.前端下载依赖

  1 $ npm install --save-dev http-proxy-middleware

2.在src目录下新建setupProxy.js文件

 1 const { createProxyMiddleware } = require('http-proxy-middleware');
2 module.exports = function(app) {
3 // /api 表示代理路径
4 //target 表示目标服务器的地址
5 app.use(
6 '/api/system',
7 createProxyMiddleware({
8 // http://localhost:4000/ 地址只是示例,实际地址以项目为准
9 target: 'http://127.0.0.1:8081',
10 // 跨域时一般都设置该值 为 true
11 changeOrigin: true,
12 // 重写接口路由
13 // pathRewrite: {
14 // '^/admin': '',// 这样处理后,最终得到的接口路径为: http://localhost:8080/xxx
15 // }
16 })
17 );
18
19 app.use(
20 '/admin/example',
21 createProxyMiddleware({
22 target: 'http://127.0.0.1:8080',
23 changeOrigin: true,
24 })
25 );
26 }

这里需要注意一点是,在http-proxy-middleware的1.0.0之前的版本与之后的版本,两者对模块引引用是存在差别的,如:

0.x.x版本的引用方式是:

  1 const proxy=require('http-proxy-middleware');

1.0.0之后的版本引用方式:

  1 const {createProxyMiddleware}=require('http-proxy-middleware');

该前端对应的后端设置如下:

1 server:
2 port: 8081
3 servlet:
4 context-path: /api
5

按照以上设置,即可实现本地开发环境解决跨域问题,当然,这里只适合在开发环境进行开发时设置,若发布到生产上后,最好方式是通过nginx代理来进行解决跨域问题。

解决React前端在开发环境的跨域问题的更多相关文章

  1. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  2. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  3. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  4. 转:Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  5. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  6. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  7. vue proxyTable代理 解决开发环境的跨域问题

    如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...

  8. Vue-cli中的proxyTable解决开发环境的跨域问题

    https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...

  9. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

随机推荐

  1. 虚拟PWN初探

    前言 之前看到星盟Q群里面的消息,Freedom师傅在B站直播关于虚拟pwn入门的公开课,然后就去听了一波,感觉受益匪浅.之前一直以为虚拟pwn是超级复杂的东西,今年打比赛也遇到了好几次,一直无从下手 ...

  2. Java 8 Stream API实例

    一.开篇 Stream?其实就是处理集合的一种形式,称之为流,在Java8中被引入,可被Collection中的子类调用. 作用?简化代码,提升你的开发效率. 不会?看完这篇你就能自己上手了! 二.实 ...

  3. 【GIT-精讲】从零玩转Git/GitHub/GitLab

    关于版本控制 一.什么是版本控制 版本控制(Version Control Systems)版本控制(Revision control)是一种软件工程技巧 在开发的过程中,确保由不同人所编辑的同一档案 ...

  4. Aggressive cows(POJ 2456)

    原题如下: Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20524   Accepted: ...

  5. [程序员代码面试指南]字符串问题-回文最少分割数(DP)

    问题描述 给定一个字符串,输出把它全部切成回文子串的最小分割数. 例:str="ACDCDCDAD",输出2. 解题思路 DP 存储结构 dp数组dp[len+1],dp[i]表示 ...

  6. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

  7. Springboot定时任务@Scheduled注解形式,参数详解

    参数详解 1.占位符 1 秒 是 0-59 , - * / 2 分 是 0-59 , - * / 3 时 是 0-23 , - * / 4 日 是 1-31 , - * ? / L W 5 月 是 1 ...

  8. (专题四)05 matlab视角处理

    方位角 视角 子图一 子图二,视点设置在图形的正上方 子图三,视点设置在图形侧面时的效果 子图四,十点设置在图形斜下方的效果 \circ用于输出符号° view函数的其他用法 视点在笛卡尔坐标中的位置 ...

  9. 安装MySQL和出现的问题解决

    在Windows下安装mysql,注意自己的Windows是32位还是64位. MySQL官网下载地址:https://dev.mysql.com/downloads/mysql/ 下载完之后,解压放 ...

  10. IDEA 条件断点 进行debug调试

    1. 鼠标左键在要断点的行号点击一下,打个断点 2.鼠标移动到断点处,然后点击一下鼠标右键,之后会弹出: 3.填写条件,可以使用该行中的代码对应的变量作为条件 4.点击Done按钮 至此条件断点设置完 ...