React配置http-proxy-middleware代理，Axios请求返回HTML而非JSON

云上老周

2026-8-9

问题分析

核心问题是代理路径匹配错误，导致请求被转发到错误URL，目标服务器返回首页HTML而非API数据：

原代理配置匹配/product开头的请求，转发后URL变成https://www.zbozi.cz/product/api/v3/product/...，这和正确的API前缀/api/v3/不符
Axios请求路径多了一层/product，进一步加剧了路径错误

解决方案

1. 修正setupProxy.js配置

将代理匹配路径改为/api，确保请求转发到正确的API前缀路径：

const { createProxyMiddleware } = require("http-proxy-middleware"); // 新版本http-proxy-middleware需用此方法

module.exports = function(app) {
    app.use(
        createProxyMiddleware("/api", {
            target: "https://www.zbozi.cz",
            secure: false,
            changeOrigin: true
        })
    );
};

注：若使用旧版（v0.x）http-proxy-middleware，可继续用proxy替代createProxyMiddleware

2. 修正Axios请求路径

去掉多余的/product前缀，直接请求/api/v3/product/...：

axios
    .get(`/api/v3/product/sonett-tuhe-mydlo-na-ruce-curd-soap-100g`,
        {
            headers: { Accept: 'application/json' },
            params: {
                limitTopOffers: 0,
                limitCheapOffers: 10,
                filterFields: "offersData",
            }
        }
    ).then(
    (product) => {
        console.log(product.data) // 建议打印data字段，Axios响应对象包含额外元数据
    }
).catch(err => {
    console.error('请求错误:', err); // 增加错误捕获，便于排查问题
})

验证逻辑

修正后请求会被正确转发：