Running into CORS issue with the OPTIONS request

Hello,

Can someone review the code below to see what I'm doing wrong? The problem is that when I make a GET call to find the entries of a headword, the browser treats it as a preflight CORS request, and introduces a OPTIONS call before the GET call, without passing any of the authentication parameters. Because it can't get past the OPTIONS request, the GET request is never made.

In the test case shown below, I use the standard Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). Specifically, the OPTIONS call fails because of the "Authentication parameters missing" 403 error.

<html>
<script>
  fetch("https://od-api.oxforddictionaries.com/api/v1/entries/en/fashion", {
    method: "GET",
    mode: "cors",
    cache: "no-cache",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "api_id": "<my_api_id>",
      "api_key": "<my_api_key>"
    },
    redirect: "follow", // manual, *follow, error
    referrer: "no-referrer"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error(error);
  })
</script>
</html>

Regards,
Karthick

Comments

  • ccrouch1996ccrouch1996 Administrator admin

    Hello @kb_sankarachary456

    Unfortunately, this request doesn’t work in our API because we do not accept CORS requests for security reasons, this previous post may help:

    https://forum.oxforddictionaries.com/api/discussion/comment/135

    You could try another different mode and see if it works, For example:

    fetch("https://od-api.oxforddictionaries.com/api/v1/entries/en/fashion", {
    method: "GET",
    mode: "same-origin",
    cache: "no-cache",
    credentials: "include",
    headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
    "api_id": "",
    "api_key": ""
    },
    redirect: "follow", // manual, *follow, error
    referrer: "no-referrer"
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.error(error);
    })

    It might also be better to use a library such as AngularJS.

    I hope this helps.

Sign In or Register to comment.