React ajax中的跨域以及代理服务器

        

Axios的诞生

        为什么会诞生Axios?说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时,由于返回的是整个页面的数据,所以整个页面都会强制刷新一下,这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时,服务器返回给我们的确是整个页面的数据,这样会造成网络资源的占用,即十分消耗网络资源。为了提高数据请求效率,异步网络请求Ajax就应运而生了,它可以在页面无刷新的情况下请求数据。因此,这样一来,当我们只是需要修改页面的部分数据时,可以实现不刷新页面的功能。

         Axios的基础用法(get、post、put 等请求方法)

        Axios常用的几种请求方法:get,post,put,patch,delete

        1.get:一般用于获取数据

        2.post:一般用于提交数据(表单提交与文件上传)

        3.patch:更新数据(只将修改的数据推送到后端(服务端))

        4.put:更新数据(所有数据推送到服务端)

        5.delete:删除数据

        当我们前端向后端发送请求的时候,比如我们有一个服务器,端口我们本地打开3000,那么我们本地前端就无法在3000端口打开,因为被后端占用了,前端可以通过http://localhost:3000/students给后端的/students路由发送get请求,但是这里后端无法返回数据给前端,因为后端无法跨域给前端的3001端口,这时候就涉及到我们今天所学的内容,代理服务器。

        

        这里的错误是跨域无法返回数据,也就是请求发出去但是回不来,因为不是同一端口被拦下来了。

        

        这个图可以帮助我们理解,一个中间代理服务器,在前端配置好,那么他现在就是在前端的端口运行着,也就是说它是端口3000,然后我们用第一个方法配置这个中间服务器。

        

        在package.json文件加“proxy”:"http://localhost:3000",就是当我们前端不管在什么端口下运行,我们发送的命令都通过3000端口发送。配置proxy之后必须重新启动前端。

        

        配置好后我们用axios库里面的请求方法get,向后端发送请求获取后端中的数据,这里是当我们发送请求的时候,我们把请求给代理服务器,然后代理服务器给服务器,然后服务器返回数据给代理服务器,代理服务器没有跨域的限制,所以可以拿到返回的数据,然后前端就可以拿到和自己相同端口的代理服务器的数据。

        

        如果改成index.html那么返回的直接就是当前端口下的public下的lndex.html文件,也就是如果3000端口有的内容,就不会发送get请求。如果改为 index2.html就会404因为前后端都没有找到对应的路径

        但是这种proxy代理服务器就写死了,只能从3000向3001,如果我还有服务器3001 就无法拿到数据。因为这种方式只能配置一个代理服务器,只能从3000->5000。

        如果我们需要对多个服务器请求数据,就需要多个代理服务器,这时候我们就需要去写一个setupProxy.js文件去配置多个代理服务器。

        

        添加这个文件然后 用的common.js 也就是说不是前端代码是node,js

        

        

        这里的http-proxy-middleware代理服务器库是脚手架自带的。我们在package.json中直接用proxy:“http://localhost:3001”也是用的这个库

        这样就可以在3000端口请求5000端口的后端数据了。

        然后我们去看我们写的配置文件都是什么作用。

        

        host字段指的是本次请求从哪里发出的。

        

        

        这里的请求地址是前端发出的请求中请求的接口地址,Host就是请求的地址这里是localhost:3001,因为开代理所以认为和后端运行的端口一致。如果changeOrigin关闭就是3000,因为从3000发过来的。不过只是欺骗服务器一下,不影响代理服务器正常运行。

        

        如果我们去掉了配置文件中的pathrewrite("^api1":'')我们在前端路径加入api表示如果当前端口没有找到对应的数据,就去后端对应的路由找,这里我们api没有变成‘’所以后端我们访问的地址就变成了api/students这显然不存在

        

        

        总结一下,当我们前端只需要访问一个服务器以及从服务器获取数据的时候,我们直接配置proxy:"http://localhost:3000"就可以 了,但是如果多个的话我们就需要去专门配置代理服务器文件然后设置多个代理服务器,来指向我们想要访问的服务器地址。还有一个重要点,这里proxy会报错,应该改为{createProxyMiddleware}。这里就是代理服务器相关内容。明天见

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

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

相关文章

HOT 100 | 73.矩阵置零、54.螺旋矩阵、48.旋转图像

一、73. 矩阵置零 73. 矩阵置零 - 力扣(LeetCode) 1. 解题思路 1. 使用两个数组分别标记每行每列是否有0,初始化全为False,遇到0就变成True。 2. 遍历矩阵,遇到0就将False改成True。 3. 再次遍历矩阵,更…

神经网络压缩

网络压缩技术学习笔记 以下笔记基于提供的 PDF 文件(tiny_v7.pdf),总结了网络压缩技术的核心概念、实现原理和方法,特别针对多模态大模型、空间智能以及未来智能体(Agent)和通用人工智能(AGI&a…

论索引影响性能的一面④ 索引失踪之谜【上】

梁敬彬梁敬弘兄弟出品 往期回顾 论索引影响性能的一面①索引的各种开销 论索引影响性能的一面②索引的使用失效 论索引影响性能的一面③ 索引开销与经典案例 开篇:DBA的深夜“寻人启事” 作为数据库的守护者,我们最信赖的伙伴莫过于“索引”。它如同一…

java集合(九) ---- Stack 类

目录 九、Stack 类 9.1 位置 9.2 特点 9.3 栈 9.4 构造方法 9.5 常用方法 9.6 注意点:循环遍历 Stack 类 九、Stack 类 9.1 位置 Stack 类位于 java.util 包下 9.2 特点 Stack 类是 Vector 类的子类Stack 类对标于数据结构中的栈结构 9.3 栈 定义&…

ARXML可视化转换工具使用说明

ARXML可视化转换工具 | 详细使用指南与说明 📝 前言 自上篇文章《聊聊ARXML解析工具:我们是如何摆脱昂贵商业软件的》发布以来,收到了众多朋友的关注和咨询,这让我倍感荣幸! 新朋友请注意:如果您还没有阅…

松胜与奥佳华按摩椅:普惠科技与医疗级体验的碰撞

在智能健康设备快速普及的今天,按摩椅已从奢侈品转变为家庭健康管理的重要工具。面对市场上琳琅满目的品牌,松胜与奥佳华凭借截然不同的发展路径,各自开辟出特色鲜明的赛道:前者以“技术普惠”理念打破高端按摩椅的价格壁垒&#…

一起学习Web 后端——PHP(二):深入理解字符与函数的使用

一、前言 在上一讲中,我们主要讲PHP的相关知识。本节我们将继续深入,学习: PHP 中各种语法字符、符号的含义与用法; PHP 中常用函数的种类、定义方式与实际应用。 这些知识是构建 Web 后端逻辑的基础,对于后期编写…

【Bluedroid】蓝牙启动之 GAP_Init 流程源码解析

蓝牙 GAP(通用访问配置文件)模块是蓝牙协议栈的核心组件,负责设备发现、连接管理及基础属性暴露等关键功能。本文围绕 Android蓝牙协议栈 GAP 模块的初始化流程与连接管理实现展开,结合代码解析其核心函数(GAP_Init、gap_conn_init、gap_attr_db_init)的功能逻辑,以及关…

最新四六级写作好词好句锦囊(持续更新中)

完整版四六级备考攻略可见另一篇博客~~(喜欢的留个点赞收藏再走呗~~) ​​​​​​四六级备考攻略-CSDN博客 一、通用 1、词组 2、单词 3、句型 二、老龄化、老年人 三、学习、社交、社会实践 四、文化、习俗 五、数字素养、数字技能 六、资…

Java 通用实体验证框架:从业务需求到工程化实践【生产级 - 适用于订单合并前置校验】

Java 通用实体验证框架:从业务需求到工程化实践【适用于订单合并前置校验】 一、业务验证痛点与需求背景 1. 传统验证方式的困境 传统验证方式存在代码冗余、维护成本高和扩展性差等问题。相同的验证逻辑在不同模块重复编写,修改验证规则时需要同步修…

PyArk飘云阁出品的ARK工具

PyArk是由飘云阁(PiaoYunGe)开发的一款功能强大的系统安全分析工具,主要用于Windows环境下的内核级检测与分析。该工具集成了进程管理、驱动模块扫描、内核及应用层钩子检测、进程注入等核心功能,旨在帮助安全研究人员深入识别潜在…

【高中数学之复数】已知复数z的幅角为60°,且|z-1|是|z|和|z-2|的等比中项,求|z|?(2003高考数学全国卷,解答题首题,总第17题)

【问题】 已知复数z的幅角为60,且|z-1|是|z|和|z-2|的等比中项,求|z|? 【来源】 2003高考数学全国卷,解答题首题,总第17题。 【解答】 解: 由复数辐长辐角定义有 zr*(Cos60iSin60) 据等比中项定义有&#xff1…

观点 | 科技企业到了品牌建设的历史性窗口期

随着全球科技产业的飞速发展,科技型企业作为推动技术创新和经济发展的重要力量,正面临着前所未有的机遇与挑战。近年来,中国科技行业保持了快速增长的态势。根据国家统计局的数据,2023年全国研究与试验发展(R&D&am…

影像组学5:Radiomics Score的计算

Rad-score(全称 Radiomics score,影像组学评分)是通过数学模型将影像组学提取的多个特征整合为一个综合性指标,从而简化临床分析与决策。 前文已介绍影像组学的病灶分割、特征提取及筛选流程,本节将重点阐述 Rad-scor…

使用Appium在iOS上实现自动化

安装 Appium npm install -g appium检测 Appium 是否安装成功 appium --version安装 Appium Doctor npm install appium-doctor -g安装 ios 测试驱动 appium driver install xcuitest检测 iOS 环境是否正常 appium-doctor --ios安装 ideviceinstaller brew install idevi…

JPA全面指南:使用步骤、语法详解与实战案例

一、JPA概述与核心概念 1.1 什么是JPA? Java Persistence API(JPA)是Java EE和Java SE平台上的ORM(对象关系映射)标准规范,它简化了Java应用程序与数据库的交互过程。JPA不是具体的实现,而是一…

Django框架认证系统默认在登录成功后尝试重定向到/accounts/profile/

这个404错误是因为Django的认证系统默认在登录成功后尝试重定向到/accounts/profile/,但你的项目中没有配置这个URL。以下是完整解决方案: 方法一:设置登录重定向路径(推荐) 在settings.py中添加以下配置: # settings.py LOGIN_REDIRECT_URL = /dashboard/ # 替换为你…

QT实现右键菜单栏

1.所需头文件 #include <QPoint> // QPoint 类型 #include <QWidget> // mapFromGlobal() 的父类 #include <QEvent> // event->globalPos() 的来源&#xff08;如 QMouseEvent&#xff09; #include <QContextMenuEvent> // 用于 QContex…

华为云Flexus+DeepSeek征文|华为云CCE容器高可用部署Dify LLM应用后的资源释放指南

目录 前言 1 高可用部署带来的资源特性 1.1 涉及的核心资源组件 1.2 高可用部署的代价 2 正确释放资源的重要性 3 使用资源编排释放资源 3.1 进入资源编排页面 3.2 两种删除方式解析 3.3 推荐操作流程 4 手动删除各类云资源 4.1 使用资源页面集中管理 4.2 分服务删…

yum查看历史操作

在 Red Hat/CentOS 系统中&#xff0c;可以使用 yum history 命令查看和管理 YUM/DNF 的历史操作记录。以下是详细使用方法&#xff1a; 1. 查看完整历史记录 sudo yum history list # 或简写 sudo yum history输出示例&#xff1a; ID | 命令行 | 日期与时间…