今天我们来学下 React 代理,实现方式有两种,相对来说也较为简单:可以在 package.json 加 proxy 属性实现、也可以创建代理配置文件 src/setupProxy.js。常用的是 src/setupProxy.js ,而 package.json 方式相对来说较为局限,所以通常不用。
因为要与 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 文件
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>
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 />);
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>
)
}
}
对 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': '' }
})
)
};
一切就绪后,就可以启动我们的项目了,这里使用的是 react-scripts 启动项目,所以还需要配置下 package.json scripts 属性
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
配置完成后,就可以使用,下面命令,启动我们的项目啦
npm start
浏览器访问启动时提示的地址,分别点击一下页面上的按钮,可以看大正确的请求到了后端的 service
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_46785144/article/details/124033176
内容来源于网络,如有侵权,请联系作者删除!