blocked by CORS policy: react js app issue. Axios

Question

Access to XMLHttpRequest at 'https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to` preflight request doesn't pass access control check: It does not have HTTP ok status.

ONLY ADDING THE CORS ANYWHERE PREURL IT WORKS FOR 10 TIMES, AS IT IS TEMPORAY. HOW DO I FIX THIS ?

SCREENSHOT: [1]: https://i.stack.imgur.com/IvSmE.png

import { useState, useEffect } from "react";
import axios from 'axios';
function App() {

  const [word, setWord] = useState("");
  const [meanings, setMeanings] = useState([]);
  const [category, setCategory] = useState("en");

  const dictionaryApi = async () => {
    try {
      const app_id = "6a94204f";
      const app_key = "953e41694cf8d1bf1549b3fcec957f5c";
      const data = await axios.get(
        // `https://cors-anywhere.herokuapp.com/https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower`
        `https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower`


        , {
          headers: {
            'Authorization': '6a94204f',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
            'Access-Control-Allow-Headers': "append,delete,entries,foreach,get,has,keys,set,values,Authorization",
          }
        });

      setMeanings(data.data);
    } catch (error) {
      console.log(error);
    }
  };
  console.log(meanings);

  useEffect(() => {
    dictionaryApi();
  }, [word, category]);



  return <>HELLO</>;
}

export default App;

Answer 1

CORS related issues should be commonly solved from server side.

Please try using Postman or similar app to trigger GET request URL https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower .

When I try, it shows 'Authentication parameters missing'.

Maybe you are not making correct use of app_id and app_key in axios request.