专栏首页小丞前端库React 入门学习(七)-- 脚手架配置代理

React 入门学习(七)-- 脚手架配置代理

📢 大家好,我是小丞同学,一名准大二的前端爱好者 📢 这篇文章是学习 React 中脚手架配置代理的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 愿你忠于自己,热爱生活

引言

React 本身只关注于页面,并不包含发送 Ajax 请求的代码,所以一般都是集成第三方的包,或者自己封装的

自己封装的话,比较麻烦,而且也可能考虑不全

常用的有两个库,一个是JQuery,一个是 axios

  1. JQuery 这个比较重,因为 Ajax 服务也只是它这个库里的一小块功能,它主要做的还是 DOM 操作,而这不利于 React ,不推荐使用
  2. axios 这个就比较轻,而且采用 Promise 风格,代码的逻辑会相对清晰,推荐使用

因此我们这里采用 axios 来发送客户端请求

以前,我们在发送请求的时候,经常会遇到一个很重要的问题:跨域!

在我以前的学习中,基本上都需要操作后端服务器代码才能解决跨域的问题,配置请求头,利用 script,这些都需要后端服务器的配合,因此我们前端需要自己解决这个问题的话,就需要这个技术了:代理

在说代理之前,先谈谈为什么会出现跨域?

这个应该是源于浏览器的同源策略。所谓同源(即指在同一个域)就是两个页面具有相同的协议,主机和端口号, 当一个请求 URL 的协议、域名、端口三者之间任意一个与当前页面 URL 不同即为跨域 。

也就是说 xxx:3000xxx:4000 会有跨域问题,xxx:3000abc:3000 有跨域问题

那接下来我们采用配置代理的方式去解决这个问题

关于跨域的问题解决方案,在之后的文章会有总结 ~

1. 全局代理

第一种方法,我把它叫做全局代理,因为它直接将代理配置在了配置文件 package.json

"proxy":"http://localhost:5000"  
// "proxy":"请求的地址"

这样配置代理时,首先会在抓原请求地址上访问,如果访问不到文件,就会转发到这里配置的地址上去请求

我们需要做的就是在我们的请求代码中,将请求的地址改到转发的地址,即可

但是这样会有一些问题,它会先向我们请求的地址,也就是这里的 3000 端口下请求数据,如果在 3000 端口中存在我们需要访问的文件,会直接返回,不会再去转发

因此这就会出现问题,同时因为这种方式采用的是全局配置的关系,导致只能转发到一个地址,不能配置多个代理

2. 单独配置

这也是我自己起的名字,这种配置方式,可以给多个请求配置代理,非常不错

它的工作原理和全局配置是一样的,但是写法不同

首先我们需要在 src 目录下,创建代理配置文件 setupProxy.js

注意:这个文件只能叫这个名字,脚手架在启动的时候,会自动执行这些文件

第二步

配置具体的代理规则,我们大致讲讲这些是什么意思

  1. 首先我们需要引入这个 http-proxy-middleware 中间件,然后需要导出一个对象,这里建议使用函数,使用对象的话兼容性不大好
  2. 然后我们需要在 app.use 中配置,我们的代理规则,首先 proxy 接收的第一个参数是需要转发的请求,我的理解是一个标志的作用,当有这个标志的时候,预示着我们需要采用代理,例如 /api1 ,我们就需要在我们 axios 的请求路径中,加上 /api1 ,这样所有添加了 /api1 前缀的请求都会转发到这
  3. 第二个参数接受的是一个对象,用于配置代理。
    • target 属性用于配置转发目标地址,也就是我们数据的地址
    • changeOrigin 属性用于控制服务器收到的请求头中 host 字段,可以理解为一个伪装效果,为 true 时,收到的 host 就为请求数据的地址
    • pathRewrite 属性用于去除请求前缀,因为我们通过代理请求时,需要在请求地址前添加一个标志,但是实际的地址是不存在这个标志的,所以我们一定要去除这个前缀,这里采用的有点类似于正则替换的方式

配置一个代理的完整代码如下

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/api1', { 
      target: 'http://localhost:5000', //配置转发目标地址
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: {'^/api1': ''} //去除请求前缀址(必须配置)
    }),
  )
}

关于脚手架配置代理的内容就到这里啦!

非常感谢您的阅读,欢迎提出你的意见,有什么问题欢迎指出,谢谢!🎈

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 如何在GPU云服务器上编译FFMPEG

    FFMPEG是目前流行且开源跨平台音视频流处理的框架级解决方案。其功能强大,从音视频记录、编解码、转码、复用、过滤到流化输出,FFMPEG的命令行工具都能高效处理。

    溪歪歪
    云服务器GPU 云服务器视频处理
  • Flink 实践教程:进阶2-复杂格式数据抽取

    流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的具备一站开发、无缝连接、亚秒延时、低廉成本、安全稳定等特点的企业级实时大数据分析平台。流计算 Oceanus 以实现企业数据价值最大化为目标,加速企业实时化数字化的建设进程。

    吴云涛
    流计算 OceanusFlink
  • 腾讯云Elasticsearch集群运维常用命令详解一(集群篇)

    腾讯云Elasticsearch Service产品提供了一种全托管的云端服务,客户可以在腾讯云控制台一键创建集群、轻松管理集群,以及高度灵活的弹性变配模式。因此,使用腾讯云ES,您可以快速部署、按需扩展您的集群,简化复杂运维工作,快速构建日志分析、异常监控、网站搜索、企业搜索、BI分析等各类业务。同时腾讯云ES团队也提供了高度专业的平台管控、内核开发及集群运维能力。本文将从集群运维角度出发,分享我们日常工作中帮客户运维集群时常用到的一些命令,以及各命令适用的场景。

    吴容
    ElasticsearchService
  • 系统设计:Twitter搜索服务

    Twitter是最大的社交网络服务之一,用户可以在其中共享照片、新闻和基于文本的消息。在本章中,我们将设计一个可以存储和搜索用户推文的服务。类似的问题:推特搜索。

    小诚信驿站
    微服务架构系统架构架构设计微服务
  • 系统设计:实时建议服务

    让我们设计一个实时建议服务,当用户输入文本进行搜索时,它会向用户推荐术语。类似服务:自动建议,提前键入搜索

    小诚信驿站
    系统架构微服务架构微服务架构设计分布式
  • Flink 实践教程:进阶1-维表关联

    流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的具备一站开发、无缝连接、亚秒延时、低廉成本、安全稳定等特点的企业级实时大数据分析平台。流计算 Oceanus 以实现企业数据价值最大化为目标,加速企业实时化数字化的建设进程。

    吴云涛
    流计算 OceanusFlink
  • 腾讯云API网关的OAuth 2.0集成

    API网关是腾讯云上流量治理的产品,一般起到承载流量入口的能力。它提供 API 托管服务,能提供 API 的完整生命周期管理,包括创建、维护、发布、运行、下线等。

    Yagr Xu
    API 网关
  • 腾讯云Elasticsearch索引生命周期管理原理及实践

    本文将从三个方面介绍Elasticsearch索引生命周期管理的特性,首先会介绍ES索引生命周期管理的基本原理,其次会通过一个常见的日志场景来一步步配置索引生命周期管理,最后向大家介绍在日常的ES运维工作中遇到的关于索引生命周期管理常见的问题及解决方法。

    吴容
    ElasticsearchService
  • 聊一聊Vue的单向数据流

    Vue官方对单向数据流的描述是这样的(去掉了几句):父子 prop 之间形成了一个单向下行绑定,父级 prop 的更新会向下流动到子组件中,额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。

    青年码农
  • 音视频开发之旅(59)- 捕获收集、定位分析 Native崩溃

    我们知道Java崩溃是在Java代码中出现了未捕获异常,导致程序异常退出,常见的异常有:NPE、OOM、ArrayIndexOutOfBoundsException、IllegalStateException、ConcurrentModificationException等等。 还有一类崩溃,也是我们不得不关注,那就是Native层崩溃,这类崩溃不像Java层崩溃那样比较清晰的看出堆栈信息以及具体的崩溃。每当遇到是都要查找分析,写这篇的目的是帮助自己做下记录,也希望能帮到有类似困扰的你,下面我们开始一起学习实践吧。 本文学习实践的demo以张绍文《Android开发高手课》中的例子进行。

    音视频开发之旅
    短视频

扫码关注云+社区

领取腾讯云代金券