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

SimoneSimone Administrator admin
edited January 25 in Frequently asked questions

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.

Comments

  • abonnerabonner Member

    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?

  • SimoneSimone Administrator admin
    edited May 15

    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.

  • vantipinvantipin Member

    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).

  • jplewjplew Member
    edited October 8

    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.

  • SimoneSimone Administrator admin

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

Sign In or Register to comment.