在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用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. JAVA 去除实体中类型为string的属性值中的空格

    前端传入的参数实体中,有时候会出现传入了一空格,导致操作失败,这时就可以利用java反射机制去除实体中类型为sting的属性值中的空格. java代码示例: package com.spyang.ut ...

  2. shell 文件判断

    文件判断参数 -e,文件是否存在 -f,文件存在且为普通文件 -d,文件存在且为文件夹 #!/bin/bash [ -e test.sh ] && echo "test.sh ...

  3. 老男孩教育python全栈第22期Day15笔记

    day15 今日内容大纲 昨日内容回顾作业讲解 装饰器:完美的呈现了开放封闭原则.装饰器的本质:闭包. def wraper(f): def inner(*args, **kwargs): " ...

  4. 记tp5.1使用composer PhpOffice的xlsx表格文件导入数据库

    在项目环境下composer require phpoffice/phpspreadsheet在项目中引用use PhpOffice\PhpSpreadsheet\IOFactory; 下面是 上传x ...

  5. 在CentOS 7服务器中使用Jexus发布.net core webapi

    环境: 服务器:CentOS 7 64位 .net core 2.1 Jexus独立版 官网:https://www.jexus.org/ 按照官网安装独立版命令:curl https://jexus ...

  6. IDEA使用 live template添加groovy脚本给方法,类,js方法添加注释(转载)

    IDEA添加Live Template: File->Setting->Editor->Live Templates Abbreviation: * Template text: * ...

  7. openstack (共享组件) 时间同步服务

    云计算openstack共享组件——时间同步服务ntp(2)   一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行 ...

  8. C++11 随机数生成器

    背景 考试想造浮点数然后发现不会 正好下午被虎哥茶话会 谈到了一些不会的问题balabala的 被告知\(C++11\)有些神奇特性(哦豁) 然后就学习了一手看上去没什么用的随机数生成器\(QwQ\) ...

  9. 【JAVA】JAVA相关知识点收集

    下面这些链接都是我这段时间(7月-9月)看过的.感觉自己现在处于一个疯狂吸收知识的阶段,如果是文字的方式一点一点搬运到自己的博客既重复又费时间,只有等自己积累到一定程度后才能进行原创性高质量的产出吧. ...

  10. Flutter中如何方便的获取音视频的长度

    此次主要是flutter集成im,在发送视频时需要加上时长,但是用视频controller只能在初始化时具备路径才可以可以使用:just_audio插件中的方法进行获取 详情看官方文档:https:/ ...