在静态index.html中调用React /about接口返回首页，如何获取目标响应？

React是单页应用（SPA），你请求的http://localhost:3000/about是前端路由路径，并非后端提供的API接口。当你通过AJAX请求这个地址时，React的开发服务器找不到对应的后端接口，就会默认返回React应用的首页HTML文件，所以你拿到的是首页内容。

方案1：调用后端API获取数据（推荐，如果你需要的是数据而非页面） #

如果你实际是想获取接口数据，而非前端页面内容，需要把API路由和前端路由分开：

• 在后端实现/api/about接口，返回你需要的数据。
• 修改静态页的AJAX请求地址：

const doPostAjax = ()=>{
    $.ajax({
        url: "http://localhost:3000/api/about",
        type: "get",
        success: function(res){
            $("#data").html(res)
        }
    })
}

如果后端和React开发服务器不在同一端口，可以用create-react-app的代理配置解决跨域：
在React项目根目录创建src/setupProxy.js，写入：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 替换成你的后端服务端口
      changeOrigin: true,
    })
  );
};

方案2：获取/about页面的渲染内容（如果确实需要页面内容） #

如果你就是想拿到/about页面渲染后的组件内容，因为SPA的特性，直接请求后端拿不到渲染后的内容，需要做以下处理：

• 启用React的服务端渲染（SSR）或者静态站点生成（SSG），让后端返回对应路由的渲染后HTML。
• 或者在后端添加一个专门的接口，渲染About组件为HTML字符串并返回。

示例（用Express搭建后端）：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const About = require('./src/components/About').default; // 导入你的About组件
const path = require('path');

const app = express();

// 提供/about-content接口返回About组件的渲染内容
app.get('/about-content', (req, res) => {
  const componentHtml = ReactDOMServer.renderToString(<About />);
  res.send(componentHtml);
});

// 托管React静态资源
app.use(express.static('build'));
// 处理前端路由，返回首页
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => console.log('服务运行在3000端口'));

然后静态页的AJAX请求改为http://localhost:3000/about-content即可拿到渲染后的组件内容。

内容的提问来源于stack exchange，提问作者Jaber Alshami