案例详解React setupProxy的使用

x33g5p2x  于2022-05-30 转载在 其他  
字(3.0k)|赞(0)|评价(0)|浏览(413)

一、简介

今天我们来学下 React 代理,实现方式有两种,相对来说也较为简单:可以在 package.json 加 proxy 属性实现、也可以创建代理配置文件 src/setupProxy.js。常用的是 src/setupProxy.js ,而 package.json 方式相对来说较为局限,所以通常不用。

二、Faker API

因为要与 API 交互,这里准备了两个 Faker API(程序源码中有,一行命令启动即可),分别是 ProductService 5000、OrderService 5001。如下:

三、初始化项目

首先,创建一个项目文件夹,使用下面命令进行初始化,初始化完成会出现 package.json 文件

npm init -y

提示:如果 node_modules 文件误删或者丢失,可以使用命令 npm install 重新下载 package.json 中的包

四、添加项目依赖

使用下面命令添加 react、react-dom、axios、http-proxy-middleware、react-scripts 这几个 package

npm install react react-dom axios http-proxy-middleware react-scripts -dev
namedescription
react react-dom这个是应该都知道,开发 react 项目必备的
axios一个 http client 工具
http-proxy-middlewarehttp 代理
react-scripts启动、发布 用的

五、项目代码

在项目文件夹创建 src 、public 文件夹,然后在 public 下创建 index.html文件,在 src 下创建 index.js App.js 文件

5.1 index.html

index.html 是必须得,作为项目的根容器文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
</html>

5.2 index.js

index.js 是项目的入口文件,主要就是将 App 绑定到 index.html 容器内

import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

5.3 App.js

App.js 这里主要模拟业务上的请求,写了两个按钮,当点击的时候,去请求后端的 service

import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {
    getStudentData = () => {
        axios.get('/ProductService/Info').then(
            response => console.log('成功了', response.data),
            error => console.log('失败了', error)
        )
    }

    getCarttData = () => {
        axios.get('/OrderService/Info').then(
            response => console.log('成功了', response.data),
            error => console.log('失败了', error)
        )
    }

    render() {
        return (
            <div>
                <button onClick={this.getStudentData}>点我获取产品数据</button>
                <button onClick={this.getCarttData}>点我获取订单数据</button>
            </div>
        )
    }
}

六、setupProxy

对 API 的调用,在 React 中,可以使用 setupProxy.js 进行配置,有点类似网关的味道,主要就是转发,其依赖于 http-proxy-middleware package。在 src 文件夹,创建 setupProxy.js 文件,主要是配置请求 API 匹配转发,这里对两个 Faker API 分别定义为了 OrderService 、ProductService 在 node 中对其的调用将转发到对应的 target 地址。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/ProductService', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: { '^/ProductService': '' }
        }),
        createProxyMiddleware('/OrderService', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: { '^/OrderService': '' }
        })
    )
};

七、启动项目

7.1 配置 scripts

一切就绪后,就可以启动我们的项目了,这里使用的是 react-scripts 启动项目,所以还需要配置下 package.json scripts 属性

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

7.2 启动项目

配置完成后,就可以使用,下面命令,启动我们的项目啦

npm start

7.3 访问项目

浏览器访问启动时提示的地址,分别点击一下页面上的按钮,可以看大正确的请求到了后端的 service

八、案例源码

https://download.csdn.net/download/weixin_46785144/85096241

相关文章