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配置多個代理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- react中axios結合後端實現GET和POST請求方式
- Ajax 的初步實現(使用vscode+node.js+express框架)
- Nodejs如何解決跨域(CORS)
- 使用 Rails API 構建一個 React 應用程序的詳細步驟
- Vue項目中該如何解決跨域問題