在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用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 proxyTable 解决开发环境的跨域问题

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

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

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

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

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

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

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

  9. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

随机推荐

  1. Katana

    - KAT101 - Katana has many nodes for operation, e.g. MaterialAssign, - The connections between nodes ...

  2. 在.net中使用aquiles访问Cassandra(一)

    aquiles是.net下基于Thrift协议访问Cassandra的第三方类库,官方地址是: http://aquiles.codeplex.com/   1.下载类库文件: http://aqui ...

  3. JavaAnnotation和反射简化开发

    Part I 我并不是在卖弄自己的英语有多少的了不起,只不过对Annotation这一次的解释真的很懊恼,“注解”和“注释”这两个对Annotation的翻译我听着不爽,所以全文都用Annotatio ...

  4. .net matlab 数据类型转换

    http://wenku.baidu.com/link?url=HWqh7fna8d4UKz7FniwMzaqC5aW2M4wi5H-lWaRXDlxJlJsPilK_tjMDgRBnNiw7rjTm ...

  5. redis 未授权漏洞利用直接登录服务器

    在没有查到杀手之前我是先把带宽&端口用iptables 做了限制这样能保证我能远程操作服务器才能查找原因 2 在各种netstat –ntlp  的查看下没有任何异常 在top 下查到了有异常 ...

  6. struts的由来

    当学习或工作时,有些同学会谈到熟悉struts.hibernate.spring等等框架,貌似熟悉这些框架是精通java的表现,但是我们应该首先弄明白为什么要学框架?是为了学习而学习?还是为了工作而学 ...

  7. [思路]为什么要做一个Web服务器

    对于.net开发者而言,提到Web服务器最容易想到的就是IIS了. IIS功能强大,配置繁多,但不免对普通用户而言过于复杂,另外在云时代的今天,同时维护多个IIS或远程维护IIS还是有诸多不便的,有很 ...

  8. day03 int bool str

    1. 昨日内容回顾 1. while循环 语法: while 条件: 循环体 else: 语句块 执行过程:判断条件是否为真. 如果真, 执行循环体.然后再次判断条件... 直到条件为假循环停止 br ...

  9. TensorFlow从入门到理解(五):你的第一个循环神经网络RNN(回归例子)

    运行代码: import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0 TIM ...

  10. Flink的Windows

    在讲解windows的众多操作之前,需要讲解一个概念: 源源不断的数据流是无法进行统计工作的,因为数据流没有边界,就无法统计到底有多少数据经过了这个流.也无法统计数据流中的最大值,最小值,平均值,累加 ...