React怎么配置多個代理實現(xiàn)數(shù)據(jù)請求返回

本文小編為大家詳細介紹“React怎么配置多個代理實現(xiàn)數(shù)據(jù)請求返回”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“React怎么配置多個代理實現(xiàn)數(shù)據(jù)請求返回”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

使用axios以及express框架進行數(shù)據(jù)傳輸

react腳手架中src文件配置如下：

App.js:

設(shè)置兩個按鈕，點擊第一個獲取學(xué)生數(shù)據(jù)，點擊第二個獲取汽車數(shù)據(jù)，值得注意的是這兩個數(shù)據(jù)源在不同的服務(wù)器中

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}>點我獲取學(xué)生數(shù)據(jù)</button>
		<button onClick={this.getCarData}>點我獲取學(xué)生數(shù)據(jù)</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:

服務(wù)器1的代碼包含學(xué)生數(shù)據(jù)

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人請求服務(wù)器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("服務(wù)器1啟動成功,地址為http://localhost:5000/students")
})

server2.js

服務(wù)器2的內(nèi)容，包含汽車的數(shù)據(jù)

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人請求服務(wù)器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("服務(wù)器2啟動成功,地址為http://localhost:5001/cars")
})

setupProxy.js:

分別配置不同的代理（b站尚硅谷視頻里那種運行不出來，版本更新了，下面這種目前可以跑出來）

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
  createProxyMiddleware('/api1', {
   //api1是需要轉(zhuǎn)發(fā)的請求(所有帶有/api1前綴的請求都會轉(zhuǎn)發(fā)給5000)
   target: 'http://localhost:5000', //配置轉(zhuǎn)發(fā)目標地址(能返回數(shù)據(jù)的服務(wù)器地址)
   changeOrigin: true, //控制服務(wù)器接收到的請求頭中host字段的值
   pathRewrite: { '^/api1': '' }, //去除請求前綴，保證交給后臺服務(wù)器的是正常請求地址(必須配置)

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

運行

啟動服務(wù)器1：

node server1.js

啟動服務(wù)器2：

node server2.js

啟動腳手架：

npm start

訪問頁面

點擊第一個按鈕：

點擊第二個按鈕：

讀到這里，這篇“React怎么配置多個代理實現(xiàn)數(shù)據(jù)請求返回”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。