Cannot fetch API data in JavaScript using fetch method

Question

I am building a simple web app to get me the meaning of a word, I am using Oxford Dictionary API to get the word meanings but unable to do so. In Oxford Dictionary documentation sample Python code is given which I am able to run properly with flask. Here is the code:

But when I try to implement the same code in vanila JS I am getting the following errors:

with (mode:"cors") : 403 error

with (mode:"no-cors") :
"Access to fetch at 'https://od-api.oxforddictionaries.com/api/v2/entries/en-gb/phobia' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

word = "phobia";
language = "en-gb";

const options = {
  method: "GET",
  mode:'cors',
  headers: {
    app_id: "<app id>",
    app_key: "<app key>",
  },
};
fetch(`https://od-api.oxforddictionaries.com/api/v2/entries/${language}/${word}`, options)
.then(response => response.json())
.then(response => {
    console.log(response);
  })
.catch(err => console.error(err));

How to solve the issue ?

Cannot fetch API data in JavaScript using fetch method

0 Answers0