kuayu react_react跨域解决方案
react跨域解决方案
1.开发环境:react+axios+element
2.电脑系统:windows10专业版
3.在使用react开发的过程中,我们总是会遇到跨域的问题,下面我来分享一下,在react中跨域处理方法!
4.我使用的是axios向后台发送请求,安装axios:npm i axios --save
5.安装代理中间件(http-proxy-middleware)完成跨域:npm i http-proxy-middleware --save
6.在src目录中创建一个setupProxy.js的文件并作如下配置：//verion < 1.0版本
const proxy = require('http-proxy-middleware'); //需要安装中间件
module.exports = function(app) {
app.use(
proxy("/api", {
target: 'https://xxx.com',
changeOrigin: true })
);
app.use(
proxy("/v2", {
target: "https://xxx2.com",
changeOrigin: true })
);
};//verion > 1.0
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
}));
app.use('/api2', createProxyMiddleware({
target: 'http://xxx.com',
changeOrigin: true,
pathRewrite: { //路径替换
'^/api2': '/api', // axios 访问/api2 == target + /api
}
}));
};
//注意一般安装的版本都是大于1的,所以可以直接选择 >1的解决方法
7.在react模板中添加如下代码:componentWillMount(){
console.log(500);
axios.post('/api/feng').then((res)=>{
console.log(res);
})
}
8.效果为:
9.本期的教程到了这里就结束啦,是不是很nice,让我们一起努力走向巅峰!
相关文章：
HDU 1429 胜利大逃亡(续) (BFS+位压缩)
题目链接：http://acm.hdu.edu.cn/showproblem.php?pid1429 胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 3309 Accepted Submission(s): 1063 Problem DescriptionIgnatius再次…
Ext fucionchart插件
http://code.google.com/p/uxmedia/downloads/list转载于:https://www.cnblogs.com/jerome-rong/archive/2012/06/09/2543565.html
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 显示动画 方式一： $("div").show(); 解释：无参数，表示让指定的元素直接显…
结构和联合--结构体内存和位段内存开辟规则
一. 结构的基本知识 聚合数据类型能够存储多个数据，C语言提供了两种类型的聚合数据类型，数组和结构。数组是相同的数据，结构是不同类型的数据聚合。结构也是一些值得集合，这些值成为它的成员，每个结构都有它的名字&a…
antd自定义分页器_自定义分页器
classPagination(object):def __init__(self, current_page, all_count, per_page_num10, pager_count11):"""封装分页相关数据:param current_page: 当前页:param all_count: 数据库中的数据总条数:param per_page_num: 每页显示的数据条数:param pager_count:…
.net实现跨页面传值
//一般用于向php，jsp等传值，因为跨语言session等不能共用，只有通过post提交 //下面演示的是服务器端控件提交 PostBackUrl"WebForm3.aspx"//这个页面只需要修改控件属性就能把值传给下一页面 protected void Page_Load(object send…
进程的同步、互斥以及PV原语
在处理进程间的同步与互斥问题时，我们离不开信号量和PV原语，使用这两个工具的目的在于打造一段不可分割不可中断的程序。应当注意的是，信号量和PV原语是解决进程间同步与互斥问题的一种机制，但并不是唯一的机制。 信号量ÿ…
ListT中，Remove和RemoveAt区别
Remove删除的是匹配的第一项。比如你的list里面有2个相同的项。那么就删除第一个。后面的不删除，找不到元素和删除失败都返回falseRemoveAt是删除索引下的项 转载于:https://www.cnblogs.com/mcyushao/p/9526208.html
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言：在vue官方资料中，我们可以可以很学会如何通过vue构建“动态组件”以及“异步组件”，然而，在官方资料中，并没有涉及到真正的“动态异步”组件，经过大量的时间研究和技术分析，我们给出目前比…
[转载] 七龙珠第一部——第004话 掳人的妖怪——乌龙
转载于:https://www.cnblogs.com/6DAN_HUST/archive/2013/04/07/3003566.html
如何解决资料下载下来为index.html和PHP文件的问题？
最近很多Down友反映，在下载中心下载资料时，明明是pdf、rar、zip格式的文件，下载完后怎么就变成index.html、php格式的文件了？既浪费了下载豆，文件还不能用，心疼啊！这是因为下载系统是动态获取的…
给大家推荐8个SpringBoot精选项目
前言 2017年，曾在自己的博客中写下这样一段话：有一种力量无人能抵挡，它永不言败生来倔强。有一种理想照亮了迷茫，在那写满荣耀的地方。 如今2018年已过大半，虽然没有大理想抱负，但是却有自己的小计划。下面…
点击Notification正确回调到之前已经放置在后台的Task中的对应Activity，而不是创建它的一个新实例...
NotificationManager notificationManager (NotificationManager)getSystemService(NOTIFICATION_SERVICE);Notification notification new Notification(R.drawable.logo_icon_16,"移动营销", System.currentTimeMillis());Intent intent new Intent(Intent.ACTI…
函数返回类的对象与拷贝构造函数
C中，如果我们在一个函数中，定义了一个类的对象，然后返回这个对象，在main函数中用一个对象去接受这个返回的对象的时候，这里面参与的函数调用大家可能不熟悉，这里通过程序和注释的方式给大家讲解一下。编译的…
ai条码插件免安装_ai条码插件2款下载|Barcode Toolbox插件+Barcode条码插件下载 - 偶要下载站...
本次一次性打包两款ai条码插件和大家分享，分别是Barcode Toolbox插件和Barcode脚本插件，支持Illustrator CS5~CC2015的条形码脚本！这两个插件不是一个插件，是有区别的两个插件。Barcode Toolbox是AI的一个非常有用的生成条码的插件…
GridView的DataKeyNames属性 转载的
偶今天用到这个了,转载 "事在人为"楼主的,原文地址: http://www.cnblogs.com/andhm/archive/2010/05/07/1730024.html DataKeyNames表示主键的列名，可以通过GridViewEntity.DataKeys[RowIndex]["ColumsName"]来获取他的值，当然它是…
反射 -- 通过字符串操作对象中的成员
getattr()setattr()hasattr()delattr()class C:def __init__(self, name):self.name namedef f(self):return Pythonobj C(Pyhton) get_name getattr(obj, name) get_func getattr(obj, f) get_func() hasattr(obj, name) setattr(obj, age, 10) delattr(obj, name)转载于:…
android默认exported_android:exported 属性详解
转自http://blog.csdn.net/watermusicyes/article/details/46460347昨天在用360扫描应用漏洞时，扫描结果，出来一个Android:exported属性，其实之前根本不知道这个属性，更不知道这个属性用来干嘛的，详情见下图࿱…
Chipset
Chipset 芯片组是一组集成电路（芯片）用于管理计算机处理器、内存和外设的数据流，通常位于主板上。 Northbridge (Memory Controller Hub) 北桥用来处理高速信号，负责CPU、RAM、AGP和PCI Express之间的通信。 Southbridge (I/O Con…
正确设置php-fpm和nginx防止网站被黑
2019独角兽企业重金招聘Python工程师标准>>> 核心总结：php-fpm 子进程所使用的用户，不能是网站文件所有者。 凡是违背这个原则，则不符合最小权限原则。 根据生产环境不断反馈，发现不断有 php网站被挂木马，绝…
一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘？ 还是输入框、光标全假的假键盘？ 手机自带的不用非得写个假的，吃饱没事干吧？ 装逼？炫技？ 宝宝也是被逼的，宝宝也很委屈~.~ …
姿态检测 树莓派_怎样在树莓派上轻松实现深度学习目标检测？
原标题：怎样在树莓派上轻松实现深度学习目标检测？雷锋网按：本文为 AI 研习社编译的技术博客，原标题 How to easily Detect Objects with Deep Learning on Raspberry Pi，作者为 Sarthak Jain。翻译 | 小哥哥 狒狒 校对…
Linux目录读写和可执行权限
一 . 进入目录权限如果我在普通用户下创建了一个目录f1，然后使用chomd u-rwx,g-rwx,o-rwx之后，我在普通用户下想进入f1目录，权限不允许。然后我切换到超级用户下，再次尝试进入到f1目录，这个时候允许进入。然后回到普通…
【译】表变量和临时表的比较(转)
关于表变量是什么（和表变量不是什么），以及和临时表的比较让很多人非常困惑。虽然网上已经有了很多关于它们的文章，但我并没有发现一篇比较全面的。在本篇文章中，我们将探索表变量和临时表是什么（以及不是什…
grub加密。
一、介绍 安全无小事 linux系统的安全分为很多方面，什么端口啊，什么网络啊，听着都特么烦，今天谈谈最简单明显的密码安全。 二、单用户模式 单用户模式个人觉得相当有用，可以用来修复系统，修改密码…… 但是…
Linux下stat + 文件名后, Access，Modify，Change的含义
我们首先在一个目录下创建了一个文件使用命令touch file然后输入命令：stat file，这个时候会输出一系列信息大家注意红色框中的三个时间Access : 文件最近一次被访问的时间Modify: 文件内容最近一次被修改的时间Change: 文件属性最近一次被改变的时间接着…
基于设计模式的学习之旅-----访问者模式(附源码)
基于设计模式的学习之旅-----访问者模式 1、初始访问者模式 2、什么是访问者模式 表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 3、模式结构图 4、模式代码事例 场景：年会，每个小组表演…
x is y python_Python 基础
2.1 程序与用户交互在python3中#input：无论用输入何种类型，都会存成字符串类型nameinput(please input your name:) #name18print(id(name),type(name),name)在python2中#raw_input与python3的input是一样的nameraw_input(please input your name:)print…
【leetcode 简单】 第八十九题 赎金信
给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串，判断第一个字符串ransom能不能由第二个字符串magazines里面的字符构成。如果可以构成，返回 true ；否则返回 false。 (题目说明：为了不暴露赎金信字迹，要从杂…
创建专属博客栏目
今天给大家get新技能了，是不是很期待捏我们一般看到的博客页面是这样的但是你是不是特别期待这样的捏其实技术上面也不是特别的 难，我们登录自己的csdn博客，然后选择“管理博客”，跳转页面之后选择“博客栏目”进入到这个页面之后…