React配置多个代理实现数据请求返回问题

 更新时间:2022年08月25日 10:58:09   作者:Icy Hunter  
这篇文章主要介绍了React之配置多个代理实现数据请求返回问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

使用axios以及express框架进行数据传输

react脚手架中src文件配置如下:

App.js:

设置两个按钮,点击第一个获取学生数据,点击第二个获取汽车数据,值得注意的是这两个数据源在不同的服务器中

import React, { Component } from 'react'
import axios from "axios"
export default class App extends Component {
	getStudentData = () => {
		axios.get("http://localhost:3000/api1/students").then(
			response => {console.log("成功了", response.data);},
			error => {console.log("失败了", error);}
		)
	}
	getCarData = () => {
		axios.get("http://localhost:3000/api2/cars").then(
			response => {console.log("成功了", response.data);},
			error => {console.log("失败了", error);}
		)
	}
  render() {
	return (
	  <div>
		<button onClick={this.getStudentData}>点我获取学生数据</button>
		<button onClick={this.getCarData}>点我获取学生数据</button>
	  </div>
	)
  }
}

index.js:

脚手架入口文件

// 入口文件
//引入react核心库
import React from 'react';
//引入ReactDOM
import ReactDOM from 'react-dom/client'
//引入App组件
import App from "./App"
// import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App/>)

server1.js:

服务器1的代码包含学生数据

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人请求服务器1");
    next();
})
app.get('/students', (request, response) => {
    const students = [
        {id:"001", name:"tom", age:18},
        {id:"002", name:"jerry", age:18},
        {id:"003", name:"tony", age:8},
    ]
    response.send(students)
})

app.listen(5000, (err) => {
    if(!err)console.log("服务器1启动成功,地址为http://localhost:5000/students")
})

server2.js

服务器2的内容,包含汽车的数据

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人请求服务器2");
    next();
})
app.get('/cars', (request, response) => {
    const cars = [
        {id:"001", name:"宝马", price:18},
        {id:"002", name:"奔驰", price:18},
        {id:"003", name:"保时捷", price:8},
    ]
    response.send(cars)
})

app.listen(5001, (err) => {
    if(!err)console.log("服务器2启动成功,地址为http://localhost:5001/cars")
})

setupProxy.js:

分别配置不同的代理(b站尚硅谷视频里那种运行不出来,版本更新了,下面这种目前可以跑出来)

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
  createProxyMiddleware('/api1', {
   //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
   target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
   changeOrigin: true, //控制服务器接收到的请求头中host字段的值
   pathRewrite: { '^/api1': '' }, //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)

  }),
  createProxyMiddleware('/api2', {
   target: 'http://localhost:5001',
   changeOrigin: true,
   pathRewrite: { '^/api2': '' },
  })
 )
}

运行

启动服务器1:

node server1.js

启动服务器2:

node server2.js

启动脚手架:

npm start

访问页面

在这里插入图片描述

点击第一个按钮:

在这里插入图片描述

点击第二个按钮:

在这里插入图片描述

到此这篇关于React配置多个代理实现数据请求返回的文章就介绍到这了,更多相关React配置多个代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React路由拦截模式及withRouter示例详解

    React路由拦截模式及withRouter示例详解

    这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React如何解决样式污染问题

    React如何解决样式污染问题

    这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 一文带你搞懂react hooks的类型声明

    一文带你搞懂react hooks的类型声明

    这篇文章主要给带大家搞清楚react hooks的类型声明,如果有同学还不清楚react hooks的类型声明,来看本文就对了,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 详解Immutable及 React 中实践

    详解Immutable及 React 中实践

    Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下
    2018-03-03
  • 通过示例讲解Remix 设计哲学理念

    通过示例讲解Remix 设计哲学理念

    这篇文章主要为大家通过示例讲解了Remix 设计哲学理念,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 编写React组件项目实践分析

    编写React组件项目实践分析

    本文通过实例给大家分享了编写React组件项目实践的全过程,对此有兴趣的朋友可以参考下。
    2018-03-03
  • React从插槽、路由、redux的详细过程

    React从插槽、路由、redux的详细过程

    React需要自己开发支持插槽功能,原理:父组件组件中写入的HTML,可以传入子组件的props中,这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
    2022-10-10
  • react实现移动端下拉菜单的示例代码

    react实现移动端下拉菜单的示例代码

    这篇文章主要介绍了react实现移动端下拉菜单的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • react Scheduler 实现示例教程

    react Scheduler 实现示例教程

    这篇文章主要为大家介绍了react Scheduler 实现示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React Fiber构建completeWork源码解析

    React Fiber构建completeWork源码解析

    这篇文章主要为大家介绍了React Fiber构建completeWork源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论