在 REACT 中进行 API 调用时动态设置目标

Posted 2023-03-28

【中文标题】在 REACT 中进行 API 调用时动态设置目标

【英文标题】：Dynamically set target when making API calls in REACT

【发布时间】：2022-01-21 08:33:10

【问题描述】：

我正在使用 React Js 和 Django 构建一个多租户网站。

这是我的 setupProxy.js 文件：

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

module.exports = function(app) 
  app.use(
    '/api/products',
    createProxyMiddleware(
      target: 'http://tenant1.localhost:8000',
      changeOrigin: true,
      secure: false,
    )
  );
;

这可行，但我需要目标值为“http://tenant1.localhost:8000”或“http://tenant2.localhost:8000”或“http://tenant3.localhost:8000”等。 .. 取决于子域或租户。

这个想法是从 URL 中获取子域 - 例如http://tenant1.localhost:3000。

有没有人知道我如何做到这一点？

作为补充说明，这是我调用 API 请求的方式：

import React,  useState, useEffect  from 'react'
import  Row, Col  from 'react-bootstrap'
import Product from '../components/Product'

import axios from 'axios'

function HomeScreen() 
    const [products, setProducts] = useState([])  /* const[state, method] */

    useEffect(() => 

        async function fetchProducts()
            const  data  = await axios.get('api/products/')
            setProducts(data)
        

        fetchProducts()

    , [])

    return (
        <div>
            <h1>Latest Products</h1>
            <Row>
                products.map(product => (
                    <Col key=product._id sm=12 md=6 lg=4 xl=3>
                        <Product product=product />
                    </Col>
                ))
            </Row>
        </div>
    )


export default HomeScreen

谢谢

【参考方案1】：

我想我可能已经找到了一个初步的解决方案：

setupProxy.js：

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

function customRouter(req) 
  const  hostname  = req
  const tenant = hostname.split('.')[0]
  return `http://$tenant.localhost:8000`


module.exports = function(app) 
  app.use(
    '/api/products',
    createProxyMiddleware(
      router: customRouter,
      changeOrigin: true,
      secure: false,
    )
  );
  app.use(
    '/media/*',
    createProxyMiddleware(
      router: customRouter,
      changeOrigin: true,
      secure: false,
    )
  );
;

我从here 得到这个。我对 React JS 非常陌生，所以我真的不知道这是否是一个好的解决方案。另外，我还需要想办法成功路由 localhost:3000...