Error message no-access-control-allow-origin (or I can’t get my client-side request to work)

Simone

Sometimes pre-flight requests will produce the error message “No 'Access-Control-Allow-Origin' header is present on the requested resource.”

Unfortunately, we are unable to support client-side application requests (this includes JavaScript, JScript, VBScript, Java applets, ActionScript, etc.).

This is because our API does not currently support CORS requests due to the potential implications for the security of our server. Instead, we suggest you to make the query reach your server side application, and then send the API request from the server rather than from the client.

If you have tried this fix and are still experiencing difficulties, please do not hesitate to reply in the comments and we will investigate further.

abonner

I'm afraid I'm too inexperienced a developer to quite understand this post. I was hoping to use the API in a simple spelling quiz app--one html file, one JS file. I've been scratching my head over how to make a proper CORS request, but does this mean that there is no solution to my current approach, armed only with javascript and jQuery?

Simone

Hi @abonner,
Oh, I know what you mean! I got this from my colleagues, I still struggle to understand it myself too!
Let me get one of them to answer your question, and to explain the original post with a little bit more detail.

vantipin

Hi @abonner,
This is more about whether or not you are writing browser clients than using JavaScripts.
In your case, you won't be able to use the API.

You can use Node.js to build backend web app. This way you will be able to use the API with Javascript. You can try https://glitch.com/ to host and demo your app.
However, if you doing scripts that are tied to web pages and suppose to run on end-user browser you'll have to deal with CORS (with OED API currently not supporting).

jplew

With vanilla Javascript this is not possible, but it is possible in case you are using a front-end JS library like Angular or Ionic.

In Angular, client-side HTTP requests to the Oxford API will give "403 Access Forbidden" errors. To get around it, you can configure your proxy.conf.json like this:

{
  "/ace": {
    "target": "https://od-api.oxforddictionaries.com/api/v1/entries/en/",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug",
    "headers": {
      "Accept": "application/json",
      "app_id": "YOUR APP ID",
      "app_key": "YOUR APP KEY"
    }
  }
}

Then do an HTTP get request in your Angular component like this:

import { Http } from '@angular/http';

...

http.get('/ace')
  .subscribe(response => {
    console.log(response.json())
})

You should now see the dictionary entry for 'ace' in your console.

Simone

Thanks for posting this, @jplew!
I'm sure it will be very useful for others

Vivek_M

For the development environment the configuration by @jplew works perfect but how to configure it for the production environment . My angular app is hosted on the nginx server I have used proxy_pass but I get Authentication parameter missing even the request header contains the app_id and app-key. My server configuration is

`server {

  root /home/ubuntu/test/dist/demo;
  index index.html;
  server_name test.vivekm.me;

  location /oxfordapi {
   # rewrite ^/oxfordapi/(/.*)$ $1 break;
    proxy_pass https://od-api.oxforddictionaries.com:443/api/v1/;
    proxy_set_header Accept application/json;
    proxy_set_header app_id $http_app_id;
    proxy_set_header app_key $http_app_key;
  }

  location / {
        try_files $uri $uri/ /index.html;
  }
}`

My app repo is Here

alesh

I'm also confused. Will anything like @jplew's solution work in production? I have a front-end Angular app that uses the Oxford API which works perfectly in Chrome but not in Safari, wondering what the easiest solution is?

mertugrul20

I also have this problem and I found a solution here: https://stackoverflow.com/questions/57675889/get-request-with-axios-bloked-by-cors-policy-on-a-vue-js-project

melita

I am really new to javascript programming and I find it difficult to understand how I can make the query reach my server side application, and then send the API request from the server rather than from the client. Could you give me an example of how this is done?

TaisFukushima

Hello @melita

We don't support requests to the API from a browser client (CORS). You could perhaps make the request to your server. From your server, you can then make the same request to the OD-API. It is usually called a middleware proxy, and there are JavaScript libraries that implement this pattern. Please, see example in this link.