Comment récupérer des données et créer une route avec le même point d'accès ?

Question

J'ai un endpoint à partir duquel je récupère les données, c'est /community.
Mon application react utilise le port 3001 mais le serveur node où se trouve le point de terminaison /community utilise le port 3000, le problème est que lorsque j'essaie de me diriger vers localhost:3001/community pour afficher un composant, il me donne les données JSON du serveur, mais j'ai besoin d'afficher le composant, pourriez-vous m'aider à identifier et corriger le problème s'il vous plaît ?

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/subscribe', {
      target: 'http://localhost:3000',
      changeOrigin: true,
      headers: {
        Connection: "keep-alive"
      }
    })
  );
  app.use(
    createProxyMiddleware('/unsubscribe', {
      target: 'http://localhost:3000',
      changeOrigin: true,
      headers: {
        Connection: "keep-alive"
      }
    })
  );
  app.use(
    createProxyMiddleware('/community', {
      target: 'http://localhost:3000',
      changeOrigin: true,
      headers: {
        Connection: "keep-alive"
      }
    })
  );
} 

App.js

import './App.css';
// import JoinUsSection from './components/JoinUsSection';
// import BigCommunitySection from './components/BigCommunitySection';
import { Provider } from 'react-redux';
import { store, persistor } from './store';
import { PersistGate } from 'redux-persist/integration/react'
import { fetchUsers } from './asyncActions/users';
import {Routes,Route} from 'react-router-dom'
import Main from './pages/Main'
import Community from'./pages/Community'

store.dispatch(fetchUsers())

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Routes>

        {/* <main id='app-container'>
          <BigCommunitySection />
          <JoinUsSection />
        </main> */}

       <Route path="/" element={<Main/>}/>
<Route path="/community" element={<Community/>}/>
        </Routes>
      </PersistGate>
    </Provider>
  );
}

export default App;

Communauté.js

import BigCommunitySection from '../components/BigCommunitySection';

const Community = () =>{
    return(
    <BigCommunitySection/>
    )
}

export default Community 

Et utilisateurs.js où je vais chercher les données :

import axios from "axios"
import { addUsers } from "../store/usersReducer"

export const fetchUsers = () => {
  return dispatch => {
    axios
      .get('/community')
      .then(response => {
        dispatch(addUsers(response.data))
      })
      .catch(error => {
        console.log(error)
      })
  }
}

Answer 1

Un modèle commun est de préfixer toutes vos URLs proxy avec /api ou similaire.

Par exemple

module.exports = function (app) {
  app.use("/api", createProxyMiddleware({
      target: 'http://localhost:3000',
      pathRewrite: {
        "^/api": "" // remove the /api prefix
      },
      changeOrigin: true,
      headers: {
        Connection: "keep-alive"
      }
    })
  )
}

Cela donnera un proxy à toute demande commençant par /api à vos points de terminaison du serveur Node, en supprimant l'option /api préfixe, c'est-à-dire

• /api/subscribe => http://localhost:3000/subscribe
• /api/unsubscribe => http://localhost:3000/unsubscribe
• /api/community => http://localhost:3000/community

Faites ensuite vos demandes auprès de /api -URLs préfixés

axios.get("/api/community")

---

Vous pouvez rendre cela encore plus facile en configurant une instance d'Axios avec les paramètres appropriés de l'option baseURL

const api = axios.create({
  baseURL: "/api"
})

api.post("/subscribe")
api.post("/unsubscribe")
api.get("/community")