React配置代理后调用API返回HTML而非JSON的问题排查

问题回顾 #

在React的useEffect中调用API时遇到CORS问题，配置http-proxy-middleware后CORS问题消失，但请求返回HTML内容，控制台报错：

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

可能原因及解决步骤 #

1. 代理路径前缀不匹配 #

你的代理配置针对/dapi路径，但目标API可能本身不带/dapi前缀。此时代理后的请求会变成https://www.apiUrl.com/dapi/restaurants/...，而这个路径不存在，返回404 HTML页面。

解决方法：添加pathRewrite去掉请求路径中的/dapi前缀：

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function addProxyMiddleware(app){
    app.use('/dapi', createProxyMiddleware({
        target: 'https://www.apiUrl.com',
        changeOrigin: true,
        pathRewrite: { '^/dapi': '' } // 移除/dapi前缀，转发到目标API的对应路径
    }));
}

2. 代理配置未正确加载 #

如果你的代理文件路径是../server/addProxyMiddleware，要确认项目是否正确加载了这个配置。比如Create React App默认只会加载src/setupProxy.js中的代理配置。

检查方式：重启开发服务器，查看控制台是否有类似[HPM] Proxy created: /dapi -> https://www.apiUrl.com的日志，没有则说明配置未生效。

解决方法：将代理配置文件移到src/setupProxy.js，或者确保你的项目构建工具（如webpack）正确引入了自定义的代理配置。

3. 目标API路径错误 #

直接在浏览器中访问完整的目标API地址：

https://www.apiUrl.com/dapi/restaurants/list/v5?lat=28.6105073&lng=77.1145653&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING

查看返回内容是否为JSON。如果返回HTML，说明你请求的API端点本身有误，需要确认正确的接口路径。

4. 检查响应状态码 #

在fetch代码中添加状态码打印，确认请求是否成功：

const fetchData = async () => {
    console.log('fetchData');
    const data = await fetch(
        "/dapi/restaurants/list/v5?lat=28.6105073&lng=77.1145653&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"
    );
    console.log('响应状态码:', data.status);
    if (!data.ok) {
        throw new Error(`请求失败：${data.status}`);
    }
    const jsonData = await data.json();
    console.log(jsonData);
};

• 若状态码为404：路径不存在，需修正API路径；
• 若状态码为500：服务器内部错误，需联系API提供者或检查参数是否正确。

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