如何修复 429（请求过多）？答案

【问题标题】：How to fixed 429 (Too Many Requests)?如何修复 429（请求过多）？
【发布时间】：2020-11-10 13:46:55
【问题描述】：

我正在 React 中创建一个自定义钩子，用于从 GitHub 作业 API 获取作业。但是CORS会产生问题。所以我也使用const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json'; 此抛出错误 429（请求过多）。我不使用任何后端。这个钩子会在加载应用程序时从 app.js 调用一次。

useFetchJobs.js

import { useReducer, useEffect } from 'react';
import axios from 'axios';

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error'
}

const BASE_URL = 'https://jobs.github.com/positions.json';

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.MAKE_REQUEST:
            return { jobs: [], loading: true }
        case ACTIONS.GET_DATA:
            return { ...state, jobs: action.payload.jobs, loading: false }
        case ACTIONS.ERROR:
            return { ...state, jobs: [], loading: false , error: action.payload.error }
        default:
            return state;
    }
}

export default function useFetchJobs(params, page) {
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true });

    useEffect(() => {
        dispatch({ type: ACTIONS.MAKE_REQUEST });
        axios.get(BASE_URL, {
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data }});
        }).catch(e => {
            dispatch({ type: ACTIONS.ERROR, payload: { error: e }});
        })
    }, [params, page]);

    return state;
};

App.js

import React from 'react';

import useFetchJobs from "./useFetchJobs";

import Container from "react-bootstrap/Container";

const App = () => {
  const { jobs, loading, error } = useFetchJobs();
  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error. Please try again...</h1>}
      <h1>{jobs.length}</h1>
    </Container>
  );
}

export default App;

【问题讨论】：

这能回答你的问题吗？ React - Axios call make too many requests
不，在传递空数组后得到 429 (Too Many Requests)
可能每次渲染时参数或页面都会发生变化，这使得 useEffect 方法再次运行并导致无限循环。
如果我传递空参数或页面也会出现此错误 429
您的 UseEffect 似乎在“监听”参数和页面状态。如果您使用这些，请尝试收听 setParams 和 setPage。与纯状态相比，何时调用这些更容易控制

标签： javascript reactjs http axios http-status-code-429

【解决方案1】：

这可能是cors-anywhere.herokuapp.com 的问题，而不是您的应用程序。

【讨论】：

【解决方案2】：

我已经完成了与您的代码相同的教程，并使用local-cors-proxy 修复了它。只需按照他们的文档进行操作即可。

使用https://api.allorigins.win/raw?url= 也对我有用，但不知何故它破坏了ReactMarkdown，因此由于某种原因不再解析作业详细信息的降价。

很多人都在使用 cors-anywhere，这可能就是它一直发送Too many requests 的原因。我想在这种情况下最好依靠自己的代理。

【讨论】：

你应该把 escapeHtml={false} 放在 ReactMarkdown 组件中

【解决方案3】：

在 URL 修复问题之前使用 https://api.allorigins.win/raw?url=。任何地方的 Cors 似乎都有问题。这是文档：https://allorigins.win/

【讨论】：