解决React前端在开发环境的跨域问题
时间:2022-07-28
本文章向大家介绍解决React前端在开发环境的跨域问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用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代理来进行解决跨域问题。
- 一些sql用法例子【Updating】
- 关于腾讯的一道字符串匹配的面试题
- Sort Map by Value in Java
- java 利用反射模拟动态语言的 eval 函数
- Spark函数讲解: combineByKey
- hadoop 里执行 MapReduce 任务的几种常见方式
- Pig、Hive、MapReduce 解决分组 Top K 问题
- Pig、Hive 自定义输入输出分隔符以及Map、Array嵌套分隔符冲突问题
- 新手教程:局域网DNS劫持实战
- 自定义 java 日期、时间 处理函数集
- MapReduce 中的两表 join 几种方案简介
- MapReduce中的自定义多目录/文件名输出HDFS
- 通过hiveserver远程服务构建hive web查询分析工具
- Hive 中内部表与外部表的区别与创建方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hive UDF/UDAF 总结
- 3分钟短文:用Laravel发一封“漂洋过海”的电子邮件
- leetcode之单词替换
- KMP算法分析
- Spring Boot 系列:最新版优雅停机详解
- 前端学数据结构与算法(八): 单词前缀匹配神器-Trie树的实现及其应用
- 突击并发编程JUC系列-Locksupport 与 Condition
- 01.视频播放器框架介绍
- C#扫描器编写各种问题荟萃
- JavaScript中的浅拷贝与深拷贝
- 自己实现一个VUE响应式--VUE响应式原理
- 各种CSS居中方案
- JavaScript的内存管理
- 实现自己的Vue Router -- Vue Router原理解析
- G级大文件分割器 + 核心源码