解决分布式React前端在本地开发环境的跨域问题

原创/朱季谦

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

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

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

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

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代理来进行解决跨域问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/194904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于ssm Vue的戒烟网站源码和论文

基于ssm Vue的戒烟网站源码和论文734 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 环境: jdk8 tomcat8.5 开发技术 ssm 摘要 随着互联网的高速发展,线上管理成为当代人们管理事物的重要手段之一&#xff…

Vue 与 React

注:本文提到的vue代指vue3 react规则更少,Vue新语法更多,规则更多 React性能比Vue更高? Vue监听状态更改更方便,并且有v-model双向绑定 Vue思维符合传统前端开发,React需要函数式思维 Vue国内多&#…

ElasticSearch之Clone index API

使用已有的索引,复制得到一个索引。 关闭testindex_001的写入操作,命令样例如下: curl -X PUT "https://localhost:9200/testindex_001/_settings?pretty" -H Content-Type: application/json -d {"settings": {"…

numpy知识库:基于numpy绘制灰度直方图

前言 对于灰度图像而言,灰度直方图可以统计灰度图像内各个灰度级出现的次数。 灰度直方图的横坐标是灰度图像中各像素点的灰度级。灰度的数值范围为[0, 255]。因此,如果将图像分为256个灰度级,那么每个灰度级唯一对应一个灰度;如…

流媒体方案之Nginx——实现物联网视频监控项目

目录 前言 一、Nginx是什么 二、Nginx在流媒体方案中的位置​编辑 三、软硬件准备 四、移植编译Nginx 五、运行Ngnix 六、测试流媒体方案 七、浏览器播放 前言 最近想做一个安防相关的项目,所以跟着韦东山老师的视频来学习视频监控方案的相关知识&#xff0…

lv11 嵌入式开发 ADC 16

目录 1 ADC 简介 2 Exynos4412下的ADC控制器 2.1 总览 2.2 特征 2.3 ADC转换时间 2.4 IO口 ​编辑3 ADC寄存器详解 3.1 寄存器介绍 3.2 ADCCON控制寄存器 3.3 ADCDAT 3.4 CLRINTADC 3.5 ADCMUX ​编辑 4 ADC编程 1 ADC 简介 ADC(Analog to Digital Converter)即…

SCAU:数的整除

数的整除 Time Limit:1000MS Memory Limit:65536K 题型: 编程题 语言: G;GCC 描述 由键盘输入5个整数,逐个判断它们能否被27整除,能的输出“YES”,不能的输出“NO”(注意,输出时,一个判断结果占一行&…

Android开发,JNI开发项目创建

文章目录 Android开发,JNI开发项目创建1.jni是什么 Android开发,JNI开发项目创建 创建工程 1.jni是什么 使得java可以访问底层c语言,java本地化接口,是桥梁。 运行下我们的项目 出现这个就是我们的JNI开发环境已经配置好了 是…

【SpringBoot】SpringBoot配置Swagger

文章目录 前言配置步骤使用步骤总结 前言 使用Swagger只需要按照规范去定义接口及接口的相关信息,就可以做到生成接口文档和在线接口调试页面 官网:Swagger官网 Knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案 配置步骤 1.导入knife4j的m…

shell命令编写

1. 1 #!/bin/bash 2 3 directory_path"/txh"4 5 # 使用 find 命令查找指定路径下的文件,并使用 wc 命令统计行数(即文件个数)6 7 file_count$(find "directory_path" -type f | wc -l)8 9 10 echo "在路径$director…

【算法思考记录】力扣2935. 找出强数对的最大异或值【Python3,位运算,哈希表】

力扣2935. 找出强数对的最大异或值 题目概述 题目编号:2935 题目难度:困难 相关标签:数组, 排序, 位运算 给定一个整数数组 nums,任务是找出其中可以形成的所谓“强数对”的最大异或值。强数对定义为一对整数 (x) 和 (y)&#…

网工学习5 交换机端口相关配置

交换机的接口属性默认支待一般网络环境,一般情况下是不需要对其接口进行设置的。在某些情况下需 要对其端口属性进行配置时,配置的对象主要有接口隔离、速率、双工等信息。 5.1 接口隔离设置 > 配置接口 GE0/0/1 和 GE0/0/2 的接口隔离功能&#xf…

arm linux 平台 打开摄像头矫正

安装v4l v4l 意思为 video for Linux, 是linux驱动链接摄像头的软件应用部分,当然先要安装好v4l-utils $ sudo apt install -y v4l-utils $ v4l2-ctl --list-devices $ v4l2-ctl -d 0 --list-formats-ext看完以后基础信息以后就可以使用jetso…

Leetcode1094. 拼车

Every day a Leetcode 题目来源:1094. 拼车 解法1:差分数组 对于本题,设 a[i] 表示车行驶到位置 i 时车上的人数。我们需要判断是否所有 a[i] 都不超过 capacity。 trips[i] 相当于把 a 中下标从 fromi 到 toi−1 的数都增加 numPassenge…

【Unity动画】什么是动画蒙版(Avatar Mask)

Avatar Mask(骨骼蒙版)是Unity中用于限制动画系统作用范围的一种机制。它允许你选择性地启用或禁用动画系统对模型骨骼的影响,从而实现更精细的动画控制。 以下是Avatar Mask的一些关键概念: 骨骼蒙版(Bone Mask&…

【ArcGIS Pro微课1000例】0045:深度学习--车牌模糊

借助ArcGIS Pro提供的车牌模糊训练模型,可以很方便实现车牌模糊。 文章目录 一、车牌模糊对比二、工具介绍三、案例实现一、车牌模糊对比 车牌模糊前: 车牌模糊后: 二、工具介绍 本功能使用的依然是ArcGIS Pro提供的深度学习工具中的使用深度学习分类像素(Classify Pixel…

JavaScript基础知识20——循环结构:退出循环

哈喽,大家好,我是雷工! 最近一段时间没学习JavaScript,今天看数字孪生的资料,发现很多低代码开发还是得必须熟悉JavaScript才行,为了以后方便搞数字孪生,有时间还是继续学习下JavaScript。 以下…

前端使用 xlsx.js 工具读取 excel 遇到时间日期少 43 秒的解决办法

在使用 xlsx 读取 excel 的时间格式的数据时,如 ‘2023-11-30’,‘2023/11/30’ ,默认会读取一串数字字符串,如:‘45260’,此时需要在 read 的时候传入一个配置项: import { read } from xlsxc…

如何开启Windows Server 2016 远端桌面

使用GUI 设定 服务器管理器–> 本地服务器–> 远端桌面 启用远端桌面 远端–> 允许远端连线至此电脑 会提示防火墙设定跟电源设定 防火墙之前已经关闭了 完成

Kubernetes v1.28.4 安装笔记

安装 kubelet kubeadm kubectl K8s 集群的每个 node 上都要安装的 官方文档参考: https://kubernetes.io/zh-cn/docs/setup/production-environment/tools/kubeadm/install-kubeadm/#installing-kubeadm-kubelet-and-kubectl 配置 containerd (容器运…