解决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代理来进行解决跨域问题。
解决React前端在开发环境的跨域问题的更多相关文章
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- 转:Vue-cli proxyTable 解决开发环境的跨域问题
转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
- vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...
- Vue-cli中的proxyTable解决开发环境的跨域问题
https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
随机推荐
- JAVA 去除实体中类型为string的属性值中的空格
前端传入的参数实体中,有时候会出现传入了一空格,导致操作失败,这时就可以利用java反射机制去除实体中类型为sting的属性值中的空格. java代码示例: package com.spyang.ut ...
- shell 文件判断
文件判断参数 -e,文件是否存在 -f,文件存在且为普通文件 -d,文件存在且为文件夹 #!/bin/bash [ -e test.sh ] && echo "test.sh ...
- 老男孩教育python全栈第22期Day15笔记
day15 今日内容大纲 昨日内容回顾作业讲解 装饰器:完美的呈现了开放封闭原则.装饰器的本质:闭包. def wraper(f): def inner(*args, **kwargs): " ...
- 记tp5.1使用composer PhpOffice的xlsx表格文件导入数据库
在项目环境下composer require phpoffice/phpspreadsheet在项目中引用use PhpOffice\PhpSpreadsheet\IOFactory; 下面是 上传x ...
- 在CentOS 7服务器中使用Jexus发布.net core webapi
环境: 服务器:CentOS 7 64位 .net core 2.1 Jexus独立版 官网:https://www.jexus.org/ 按照官网安装独立版命令:curl https://jexus ...
- IDEA使用 live template添加groovy脚本给方法,类,js方法添加注释(转载)
IDEA添加Live Template: File->Setting->Editor->Live Templates Abbreviation: * Template text: * ...
- openstack (共享组件) 时间同步服务
云计算openstack共享组件——时间同步服务ntp(2) 一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行 ...
- C++11 随机数生成器
背景 考试想造浮点数然后发现不会 正好下午被虎哥茶话会 谈到了一些不会的问题balabala的 被告知\(C++11\)有些神奇特性(哦豁) 然后就学习了一手看上去没什么用的随机数生成器\(QwQ\) ...
- 【JAVA】JAVA相关知识点收集
下面这些链接都是我这段时间(7月-9月)看过的.感觉自己现在处于一个疯狂吸收知识的阶段,如果是文字的方式一点一点搬运到自己的博客既重复又费时间,只有等自己积累到一定程度后才能进行原创性高质量的产出吧. ...
- Flutter中如何方便的获取音视频的长度
此次主要是flutter集成im,在发送视频时需要加上时长,但是用视频controller只能在初始化时具备路径才可以可以使用:just_audio插件中的方法进行获取 详情看官方文档:https:/ ...