react网络请求使用http-proxy-middleware配置路由转发 fetch

╰半夏微凉° 2022-12-05 15:27 435阅读 0赞

## 一、网络请求 ##

ajax、axios、fetch

### 1.配置代理 ###

(1)直接修改package.json

在react项目的package.json中增加一个代理转发规则：

"proxy":"http://域名:端口号"

重启项目

(2)使用http-proxy-middleware插件

安装

npm i http-proxy-middleware --save

在src目录下创建一个setupProxy.js【名字不能写错】，react会自动的加载这个文件

//引入中间件
    const proxy = require('http-proxy-middleware');
    //定义具体的转发规则
    module.exports = function(app){ 
        app.use(proxy.createProxyMiddleware('/api',{ 
            target:'http://localhost:3000',
            changeOrigin:true,
            pathRewrite: { 
                '^/api':'' //重写路由
            }
        }))
    }
    路由转发
    允许跨域
    重写路由

要把package.json写的proxy选项去掉，重启项目

### 2.fetch发起网络请求 ###

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。fetch函数就是原生js，没有使用XMLHttpRequest对象。

fetch  
1、第一个参数是URL:  
2、第二个是可选参数，可以控制不同配置的 init 对象  
3、使用了 JavaScript Promises 来处理结果/回调

在页面组件发起网络请求

componentDidMount(){
        fetch('/api/getbanner').then(req=>req.json()).then(res=>{
        	console.log(res)
        })
    }

发起网络请求中不需要写域名和端口号

### 3.axios发起网络请求 ###

npm i axios --save

发表评论取消回复

表情：

评论列表（有 0 条评论，435人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 路由配置

> 使用 react-router-dom 配置路由安装 react-router-dom 安装 yarn add react-router-do

偏执的太偏执、/ 2023年07月09日 06:29/ 0 赞/ 68 阅读

相关配置请求路由

Bookinfo 应用部署了一个用于演示多种 Istio 特性的 Bookinfo 应用，该应用由四个单独的微服务构成。这个应用模仿在线书店的一个分类，显示一本书的信息

深碍√TFBOYSˉ_/ 2023年01月18日 14:21/ 0 赞/ 69 阅读

相关 react网络请求使用http-proxy-middleware配置路由转发 fetch

一、网络请求 ajax、axios、fetch 1.配置代理 (1)直接修改package.json 在react项目的package.json中增加一个代理转

╰半夏微凉°/ 2022年12月05日 15:27/ 0 赞/ 436 阅读

相关 REACT_react路由配置

路由配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

向右看齐/ 2022年10月11日 00:56/ 0 赞/ 345 阅读

相关 react-router路由配置

React路由传参，路由配置 const RouteConfig = [ { path: 'first',

亦凉/ 2022年05月24日 04:47/ 0 赞/ 401 阅读

相关 react-native网络请求fetch

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

矫情吗；*/ 2022年05月22日 10:12/ 0 赞/ 325 阅读

相关 React路由配置使用

Router包安装: 安装包还是要打开命令行工具，使用npm来进行安装。 npm install --save react-router react-route

àì夳堔傛蜴生んèń/ 2022年01月07日 17:39/ 0 赞/ 336 阅读

相关 React 路由配置

转载https://blog.csdn.net/We\_jia/article/details/89353729\%E4%B8%80%E3%80%81%E8%B7%AF%E7%

╰半橙微兮°/ 2021年12月11日 10:49/ 0 赞/ 551 阅读

相关 react 路由Link配置

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对

╰+哭是因爲堅強的太久メ/ 2021年07月24日 23:25/ 0 赞/ 627 阅读

相关 react 处理fetch网络请求

1、通过node.js搭建服务器,且必须有跨域请求 2、php搭建的不行,估计是跨域的问题 3、在页面渲染后的componentDidMount()生命

今天药忘吃喽~/ 2021年07月24日 22:03/ 0 赞/ 494 阅读