Reac03:react脚手架配置(代理配置)

react脚手架配置

  • reactAjax
    • 下载Axios
    • 配置代理
      • 第二种配置代理的方式
    • github搜索案例

reactAjax

  • React本身只关注于界面,并不包含发送ajax请求的代码
  • 前端应用需要通过ajax请求与后台进行交互(json数据)
  • react应用中需要集成第三方ajax(或自己封装)

常用的ajax请求库

  • jquery:比较重不建议
  • axios:轻量级,建议使用

下载Axios

yarn add axios

import axios from "axios";const App = () => {const getDepts = () => {axios.get('http://localhost:8080/api/dept/getDepts').then(response=>{console.log('成功了',response.data)},error=>{console.log('失败了',error)})}return (<div><button onClick={()=>getDepts()}>点击获取数据</button></div>)
}
export default App;

上述代码中由于ajax同源策略(同一域,同一端口限制),前端是3000端口,后端是8080端口发生了跨域问题。

  • 同一域不同端口号:前端可以发送请求但是无法接收数据
  • 不同域不同端口:请求都无法发送
    由于发生了跨域问题,此时在前端必须配置代理来解决跨域问题

配置代理

  • 第一种配置方式
    在这里插入图片描述
    此时请求代码为:
 const getDepts = () => {axios.get('http://localhost:3000/api/dept/getDepts').then(response=>{console.log('成功了',response.data)},error=>{console.log('失败了',error)})}

前端代码先从3000去找,找不到的话代理服务器再从8080去找
在这里插入图片描述

第二种配置代理的方式

在src文件下新建setupProxy.js文件

const {createProxyMiddleware} = require('http-proxy-middleware')module.exports = function (app) {app.use(createProxyMiddleware('/api', {target: 'http://localhost:8080/',changeOrigin: true,pathRewrite: {'^/api': ''}}),createProxyMiddleware('/api1', {target: 'http:localhost: 8081',changeOrigin: true,pathRewrite: {'^/api1': ''} }))
}
  • 请求代码
  const getDepts = () => {axios.get('/api/dept/getDepts').then(response=>{console.log('成功了',response.data)},error=>{console.log('失败了',error)})}

target: 请求转发给谁
changeOrigin:控制服务端收到的请求头的host字段的值,如果是true则服务端收到的host为服务端host,false的话服务端收到的地址为代理服务器地址
pathRewrite:重写请求路径,将/api1替换成‘’

github搜索案例

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

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

相关文章

STL——queue容器

1.queue基本概念 概念&#xff1a;queue是一种先进先出&#xff08;First In First Out,FIFO&#xff09;的数据结构&#xff0c;它有两个出口。 队列容器允许从一端新增元素&#xff0c;从另一端移除元素。 队列中只有队头和队尾才可以被外界使用&#xff0c;因此队列不允许…

mongoose中http server服务器解决“Access-Control-Allow-Origin mongoose”跨域问题

问题 使用mongoose做http服务器&#xff0c;自己构造的浏览器端jquery在访问server时&#xff0c;会遇到&#xff1a; Access to XMLHttpRequest at http://127.0.0.1:8000/ from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is pr…

关于HTTPS

目录 什么是加密 对称加密 非对称加密 中间人攻击 引入证书 HTTPS是一个应用层的协议,是在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输,这就导致在传输的过程中出现一些被篡改的情况. 运营商劫持事件 未被劫持的效果,点击下载按钮,就会…

uni-app引入vant表单(附源码)

新建项目 下载安装vant npm i vant main.js引入 import { Form } from vant; import { Field } from vant;Vue.use(Form); Vue.use(Field);代码引入 <van-form submit"onSubmit"><van-fieldclass"rePwd"v-model"username"name"请…

代码随想录刷题笔记(DAY2)

今日总结&#xff1a;今天在学 vue 做项目&#xff0c;学校还有很多作业要完成&#xff0c;熬到现在写完了三道题&#xff0c;有点太晚了&#xff0c;最后一道题的题解明天早起补上。&#xff08;补上了&#xff09; Day 2 01. 有序数组的平方&#xff08;No. 977&#xff09;…

【qt】解决qt里编辑qss后失效问题(qt编码问题)

1、先创建qss文本stylesheet.qss 以按钮为例 QPushButton {background-color:rgb(240,255,255);color: rgb(0, 0, 2);border-style: outset;border-color: beige;border-radius: 10px; }/* hover按钮悬浮&#xff0c;鼠标悬浮在按钮上的状态&#xff0c;按钮颜色 */QPushButto…

Linux调试工具—gdb

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;HEART BEAT—YOASOBI 2:20━━━━━━️&#x1f49f;──────── 5:35 &#x1f504; ◀️ ⏸ ▶️ ☰ …

HackTheBox - Medium - Linux - Encoding

Encoding 前言 经过10个月左右的网安自学&#xff0c;我想说的第一句话无疑是&#xff1a;感谢TryHackMe。当然&#xff0c;后续的HackTheBox&学院、CRTO等等&#xff0c;对我的帮助都很大。 许多师傅们都在年度总结&#xff0c;我也看了大家都收获很多&#xff0c;都很…

软件工程PPT 笔记摘录(2)

分析软件需求 UML 提供了用例图来分析和描述用例视角的软件需求模型 UML 提供了交互图和状态图来描述行为视角的软件需求模型 UML 提供了类图来描述和分析业务领域的概念模型 顺序图&#xff1a;强调消息传递的时间序 通信图&#xff1a;突出对象间的合作 类图&#xff0…

重温MySQL之索引那些事

文章目录 前言一、概念1.1 索引作用1.2 索引类型1.3 B树索引结构1.4 B树索引源码分析 二、查询计划2.1 explain2.2 id2.3 select_type2.4 table2.5 partitions2.6 type2.7 possible_keys2.8 key2.9 key_len2.10 ref2.11 rows2.12 filtered2.13 Extra 三、索引优化3.1 索引失效3…

C#高级 02异步编程

基础知识 1.什么是异步任务 包含了异步任务的各种状态的一个引用类型 1)正在运行、完成、结果、报错等 2)另有ValueTask值类型版本对于异步任务的抽象 1)开启异步任务后&#xff0c;当前线程并不会阻塞&#xff0c;而是可以去做其他事情 2)异步任务&#xff08;默认&#xff…

Java技术栈 —— Nginx的使用

Java技术栈 —— Nginx的使用 一、认识Nginx二、搭建Nginx环境2.1 在Ubuntu上安装Nginx 三、使用Nginx3.1 配置负载均衡(HTTP) 一、认识Nginx 企业需要运行多个相同的副本&#xff0c;并将负载分散在整个系统集群上&#xff0c;为了高性能的负载均衡&#xff0c;引入了Nginx代…

【Vue2 + ElementUI】el-table中校验表单

一. 案例 校验金额 阐述&#xff1a;校验输入的金额是否正确。如下所示&#xff0c;点击【编辑图标】会变为input输入框当&#xff0c;输入金额。当输入框失去焦点时&#xff0c;若正确则调用接口更新金额且变为不可输入状态&#xff0c;否则返回不合法金额提示 <templat…

Python pycharm编辑器修改代码字体

在pycharm编辑器下修改代码字体&#xff0c;可以按照以下步骤&#xff1a; 点开上图所示的菜单&#xff0c; 再点击File->Settings&#xff0c;进入设置页面。 我们找到Editor下的Font并点选&#xff0c;然后我们就可以在右侧修改字体相关配置了。 这里建议使用等宽字体&…

SparkStreaming与Kafka整合

1.3 SparkStreaming与Kafka整合 1.3.1 整合简述 kafka是做消息的缓存&#xff0c;数据和业务隔离操作的消息队列&#xff0c;而sparkstreaming是一款准实时流式计算框架&#xff0c;所以二者的整合&#xff0c;是大势所趋。 ​ 二者的整合&#xff0c;有主要的两大版本。 kaf…

webpack的深入学习与实战(持续更新)

一、何为Webpack Webpack是 一个开源的JavaScript模块打包工具&#xff0c;其最核心的功能是解决模块之间的依赖&#xff0c;把各个模块按照特定的规则和顺序组织在一起&#xff0c;最终合并为一个JS文件或多个。 二、带宽的换算 目前我们的云服务器带宽为5M 三 、bundle 体…

二叉树题目:根到叶路径上的不足结点

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;根到叶路径上的不足结点 出处&#xff1a;1080. 根到叶路径上的不足结点 难度 6 级 题目描述 要求 给定二叉树的根结点 root \texttt{root} root…

maven中dependencyManagement标签

简介 dependencyManagement正如其名&#xff0c;用于项目依赖的统一管理。 在父项目中的pom.xml文件中加入dependencyManagement标签即可完成依赖版本的声明。在声明完成后&#xff0c;子项目&#xff08;module&#xff09;中引用相同的依赖时可以不指定version标签自动引入…

【python报错】UserWarning: train_labels has been renamed targets

UserWarning: train_labels has been renamed targetswarnings.warn(“train_labels has been renamed targets”) 这是一条 Python 警告信息&#xff0c;它表示 train_labels 这个变量已经被重命名为 targets&#xff0c;在将来的版本中可能会移除 train_labels。因此&#x…

51蛋骗鸡595级联1616点阵

缘由如何用单片机独立按键控制16*16LED点阵模块点亮和熄灭?求指导 - 24小时必答区 #include "reg52.h" unsigned char code DuLiAnJian[]{1,2,4,8,16,32,64,128,254,253,251,247,239,223,191,127}; unsigned char code CHARCODE[12][8]{ //{0xFD,0xFD,0x0D,0xED,0x…