请帮忙排查调用Yelp API的HTTP请求代码出现403及JSON解析错误问题

问题1：fetch结果赋值逻辑错误 #

你当前代码中把await fetch()的返回值传给了console.log()，再将console.log()的返回值赋值给rawData，而console.log()的返回值是undefined，后续调用undefined.json()直接触发异常。
同时403状态码返回的响应内容是纯文本错误提示，不是JSON格式，直接调用.json()也会触发JSON解析异常。

问题2：403 Forbidden错误原因 #

你使用的公共cors-anywhere.herokuapp.com代理服务早已停止公开无限制使用，该公共演示实例现在仅作演示用途，限流严格，绝大多数请求会直接返回403。另外还需要确认你的Yelp API_KEY是否有效、未过期。

修复方案 #

第一步：修正请求逻辑

const fetchData = async (e) => {
    const BASE_URL = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search"
    e.preventDefault();   
    setHome(false)
    try{
        // 先获取请求响应，再单独打日志
        const response = await fetch(`${BASE_URL}?location=ny&term=pizza`, {
            headers: {
                Authorization: `Bearer ${API_KEY}`,
            }
        })
        console.log(response)
        // 先判断请求是否成功，再解析响应
        if (!response.ok) {
            const errText = await response.text()
            throw new Error(`请求失败，状态码：${response.status}，错误内容：${errText}`)
        }
        const res = await response.json();
        setRestaurants(res.businesses)
        setParams({
            term: "",
            location: ""
        })
    } catch (error) {
        console.error(error)
    }
}

第二步：解决跨域代理问题

• 最优方案：自行实现后端接口转发Yelp请求，前端只请求你自己的后端接口，既可以避免跨域问题，也能避免把Yelp API_KEY直接暴露在前端代码中导致密钥泄露。
• 本地测试方案：安装浏览器跨域禁用插件，直接请求Yelp官方接口，不需要走cors-anywhere代理；也可以在本地自行部署cors-anywhere服务使用。
• 确认你的Yelp API_KEY配置正确，在Yelp开发者后台拥有对应接口的访问权限。

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