从API接收HTML响应而不是JSON

Question

我正在尝试使用 useEffect 挂钩内的 API，这会导致 CORS 问题。 为了解决这个问题，我正在尝试设置代理中间件。此后，我没有收到 CORS 问题，而是收到了 HTML 正文，而不是来自 API 的 JSON 响应。我不太确定什么以及如何解决这个问题，因为我正在学习 React，并且不太确定在哪里调查这个问题。

代理中间件

在“../server/addProxyMiddleware”内创建了一个 addProxyMiddleware.js 文件并添加了此代码 -

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function addProxyMiddleware(app){
    app.use('/dapi', createProxyMiddleware({
        target: 'https://www.apiUrl.com',
        changeOrigin: true
    }));
}

在 bodyComp.js 组件（我使用 API 的地方）内部，添加了以下代码 -

import { useEffect, useState } from "react";
const BodyComp = () => {

    const [restaurantList, setrestaurantList] = useState(resDataList);
    useEffect(()=>{
        fetchData();
    },[]);

    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"
        );

        const jsonData = await data.json();
        console.log(jsonData);
    };
    return(  
        <div className="bodyCls">
        </div>
    );
}
export default BodyComp;

此后我在控制台中收到以下响应 -

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

Answer 1

端点似乎返回的是 html，而不是 json，您可以查看内容类型标头并确认吗？ cors 问题可能已通过您的解决方案解决，不太确定 changeOrigin 的作用，但请确保它满足您的安全需求。

但回到 json/html 问题，端点以

page_type=DESKTOP_WEB_LISTING

结尾的事实表明它返回 html，一个充当列表的页面，听起来像 html。