react脚手架配置代理解决跨域问题

一、问题描述:

控制台报错,出现跨域问题
在这里插入图片描述

二、解决方案

配置代理:
第一种配置方式:

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明:

  1. 优点:配置简单,前端请求资源时可以不加任何前缀。
  2. 缺点:不能配置多个代理。
  3. 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
    在这里插入图片描述

在这里插入图片描述
第二种配置方式:

  1. 第一步:创建代理配置文件

    在src下创建配置文件:src/setupProxy.js
    
  2. 编写setupProxy.js配置具体代理规则:

    const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000changeOrigin默认值为false,但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))
    }
    

说明:

  1. 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
  2. 缺点:配置繁琐,前端请求资源时必须加前缀。

changeOrigin:控制服务器收到的请求头中Host字段的值
在这里插入图片描述
在这里插入图片描述
pathRewrite:重写请求路径
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

kstools工具是什么牌子_2020年平衡车推荐,电动平衡车哪个牌子好?老司机教你如何选购电动平衡车...

2020年平衡车推荐,电动平衡车哪个牌子好?老司机教你如何选购电动平衡车随着我国科技的发展,生活水平的提高,在很多地方都出现了电动平衡车的身影,人们将电动平衡车当做短距离代步的工具,也是非常实用的。很…

plsql 中的一些好的设置和快捷键总结

1、SQL语句字符全部大写 自认为这是个好习惯,信息系统的核心是数据库,系统出问题时最先要查的就是SQL语句,怎样在浩瀚的日志中快速找到那条SQL语句是件比较痛苦的事情。 SQL语句全部大写并不能彻底解决这一问题,但在一堆代码…

python工控怎么样_搞工控不了解python,好比雄鹰断了翅膀,理由在这里!

这时,距离下班只有30分钟了。无奈,先梳理一下要展示的数据指标:达成率,环比,增长、人均单产、人力成本等数据的演算、推导、分析,还要匹配对应的PPT数据魔方....数据很多,先把每个人的数据调出来…

react父子组件通信案例

父组件:App组件 子组件:Search组件、List组件 案例需求:文本框中输入关键词,点击搜索按钮后,下方列表展示出搜索结果 实现思路: 子组件Search组件向父组件App传递状态(状态包括:是否…

模块与包(8)

第8章 复杂程序组织模块:包含函数或者类的Python程序导入模块形式:import 模块名import 模块名 as 新名字 from 模块名 import 函数名from 模块名 import * #导入模块中的所有代码使用import和from导入,调用函数的不同:使…

matlab画线不同颜色_怎样画线框图才有意义

我们常轻忽身边习以为常的事物,觉得没有必要为一些看似简单又可有可无的东西浪费时间——例如线框图。虽然没必要凡事都寻根问底,但当面对复杂问题时,脚踏实地回归基本面也许才是根本解法。本文章深入介绍程序开发界面设计中,最简…

react 消息订阅-发布机制(解决兄弟组件通信问题)

消息订阅-发布机制 工具库: PubSubJS下载: npm install pubsub-js --save使用: 1)import PubSub from ‘pubsub-js’ //引入 2)PubSub.subscribe(‘delete’, function(data){ }); //订阅 3)PubSub.publish(‘delete’, data) //发布消息 App组件: import React,…

运行Myeclipse发生这事这是怎么回事,大神们

转载于:https://www.cnblogs.com/zhuh102/p/5753616.html

非零返回怎么解决_VLOOKUP如何返回多个值?

今天我来谈谈大家最熟悉的函数,也是使用频率最高的函数,基本是每天都在使用-VLOOKUP大家都知道VLOOKUP可以根据条件,查找并返回满足条件对应列的值,但是他的设定只是只能返回第一个满足条件的值如果我们要返回满足条件的多个值&am…

Fetch发送网络请求

1. 文档 https://github.github.io/fetch/https://segmentfault.com/a/1190000003810652 2. 特点 fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求老版本浏览器可能不支持 3. 相关API GET请求 fetch(url).then(function(response) {return response.…

JSX详解React的事件绑定事件参数的传递

一、认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢? 它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗?其实是不可以的&#xff0c…

剑指Offer 从尾到头打印链表

题目描述 输入一个链表,从尾到头打印链表每个节点的值。 输入描述: 输入为链表的表头 输出描述: 输出为需要打印的“新链表”的表头 思路: 用容器vector,递归到最后一个元素,push_back到dev中。 AC代码: 1 /**2 * str…

python排序元组两个元素_在python中对具有3个元素的元组列表进行排...

只需对列表进行排序;默认排序功能可以满足您的需求.比较两个元组时,将根据它们的内容对其进行排序;首先对第一个元素进行排序,如果相等,则对第二个元素进行排序,依此类推.演示:>>> L [(14, 2, 3), (1, 14, 0), (14, 1, 1), (1, 14,…

叠积木

【题目描述】 约翰和贝西在叠积木。共有30000块积木,编号为1到30000。一开始,这些积木放在地上,自然地分成N堆。贝西接受约翰的指示,把一些积木叠在另一些积木的上面。一旦两块积木相叠, 彼此就再也不会分开了&#xf…

总谐波失真计算公式_新能源汽车技术|车用轮毂电机转矩谐波协同控制策略

点击 电机与控制应用 关注我们轮毂电机因结构简单、驱动灵活的特点广泛应用于轻型电动车辆。电机运行中存在的齿槽效应、逆变器非线性效应及电流谐波等问题,导致电机电磁转矩波动,影响车辆运行的平顺性。通过电磁转矩谐波分析发现其主要成分为低阶谐波。…

React条件渲染列表渲染

一、React条件渲染 某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if、v-show;在React中,所有的条件判断都和普通的J…

解决VirtualBox错误:“FATAL:No bootable medium found!”

VirtualBox错误:“FATAL:No bootable medium found!”  用VirtualBox安装系统出现这个错误的几率极高,因为当哥出现同样问题的时候股沟了下”FATAL:No bootable medium found!“出现很多内容,但没一个把问题解决了的…

React事件总线

通过Context主要实现的是数据的共享,但是在开发中如果有跨组件之间的事件传递,应该如何操作呢? 一、安装events 在Vue中我们可以通过Vue的实例,快速实现一个事件总线(EventBus),来完成操作&…

字符串最长公共子序列python_求解两个字符串的最长公共子序列

一,问题描述给定两个字符串,求解这两个字符串的最长公共子序列(Longest Common Sequence)。比如字符串1:BDCABA;字符串2:ABCBDAB则这两个字符串的最长公共子序列长度为4,最长公共子序列是:BCBA二…

React中使用ref

一、如何使用ref 在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放;触发强制动画;集成第三方…