How to fixed 429 (Too Many Requests)?

Question

I am creating a custom hook in React for fetching jobs from GitHub jobs API. But CORS creating problems.So I also use const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json'; This throwing error 429 (Too Many Requests). I do not use any backend. This hook will be called once from app.js while loading application.

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;

Answer 1

I have done the same tutorial that your code is based on and I fixed it by using local-cors-proxy. Just follow their documentation and you should be good to go.

Using https://api.allorigins.win/raw?url= worked for me as well, but somehow it broke ReactMarkdown, so the job detail's markdown was not parsed anymore for some reason.

Many people are using cors-anywhere, which is probably why it sends Too many requests all the time. I guess its better to rely on an own proxy in this case.