!!! 本文已参与「新人创作礼」活动，一起开启掘金创作之路。更多干货文章，可以访问菜鸟厚非

一、简介

今天我们来学下 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

name	description
react react-dom	这个是应该都知道，开发 react 项目必备的
axios	一个 http client 工具
http-proxy-middleware	http 代理
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 在这里插入图片描述

八、案例源码

download.csdn.net/download/we…

案例详解React setupProxy的使用