CORS error for request to api.upcitemdb.com endpoint

Question

I know this is So simple code but somehow its not working. What I what to do is to call GET API of :

https://api.upcitemdb.com/prod/trial/lookup?upc=4011200296908

I want to call this HTML by using JavaScript or Jquery. I have tried many things but its not working. Following code which I have applied but its not working :

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="loadDoc()">Request data</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      alert("responseText" + this.responseText);
    } else {
      alert("Error");
    }
  };
  xhttp.open("GET", "https://api.upcitemdb.com/prod/trial/lookup?upc=4011200296908", true);
  xhttp.send();
}
</script>

</body>
</html>

I also have tried to call same API with Jquery by using Ajax. Following is code for the same :

<!DOCTYPE html>
<html>
<body>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</header>
<button type="button" onclick="loadDoc()">Request data</button>

<script>
function loadDoc() {
    $.ajax({
        url:"https://api.upcitemdb.com/prod/trial/lookup?upc=4011200296908",
        success:function(response){
          alert(response);          
        },
       error: function() {
        alert("Error");
        }
    });
}
</script>

</body>
</html>

I have tried the code of "XMLHttpRequest" and I am getting below failure in console @Hammerbot : Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID — Ronak Joshi, Sep 28 '18 at 12:34
Always a good idea to look in the console: `Failed to load https://api.upcitemdb.com/prod/trial/lookup?upc=4011200296908: The 'Access-Control-Allow-Origin' header has a value 'https://www.upcitemdb.com' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.` — freedomn-m, Sep 28 '18 at 12:35
Thanks for the detailed log. Can you tell what it the reason behind this API failing? @freedomn-m — Ronak Joshi, Sep 28 '18 at 12:36
You can not make calls to a 3rd party site if they do not set CORS. That is how it works. Read about the Same Origin Policy and CORs — epascarello, Sep 28 '18 at 12:41
So, this "upcitemdb.com" dose not provide their to call API from HTML code? Because I can call this same API from my Android native code. @epascarello — Ronak Joshi, Sep 28 '18 at 12:42
Read about the same origin policy..... https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy — epascarello, Sep 28 '18 at 12:44
I do not have any web-server for now. I just have this one HTML page. So, CORS solutions are implementing on server's configuration, which is not necessary for me as of now. @sideshowbarker — Ronak Joshi, Sep 28 '18 at 17:15
The CORS solution needs to be implemented in the server configuration of the `https://api.upcitemdb.com/prod/trial/lookup` server. Since you don’t control that server, your only option would be to make the request through a proxy. See the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 — sideshowbarker, Sep 28 '18 at 21:29

score 3 · Answer 1 · answered Sep 28 '18 at 12:37

3

That's a classic one!

If you open the developer tab (f12) you may see the following error:

Failed to load https://api.upcitemdb.com/prod/trial/lookup?upc=4011200296908: The 'Access-Control-Allow-Origin' header has a value 'https://www.upcitemdb.com'

This means that the server https://api.upcitemdb.com don't want you to use his resources on any website but 'https://www.upcitemdb.com'. If you don't own this site you cannot load it's resources or should ask the admin to give your site the authorization. If you own it learn more about you CORS configuration.

answered Sep 28 '18 at 12:37

Damien Gilles

136
4

But then why this URL is working, if I hit the same in web-browser ? – Ronak Joshi Sep 28 '18 at 12:38
And if there is any need, I already purchased their premium plan. So, I have secret key and client key which I can send on header. But, thing is even that also not working. – Ronak Joshi Sep 28 '18 at 12:39
Ok, that's a question of security: Everyone can access this site using a browser but other sites cannot. Imagine the page google.com includes your script, this would make all google's clients in the world try to connect to https://api.upcitemdb.com and DoS the server. To counter that, a site A can load a resource from a site B only if site B tells in a header that A is authorized to. – Damien Gilles Sep 28 '18 at 12:42
Then you should specify the header of the request in $.ajax or via XHR. This post may help you: https://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery – Damien Gilles Sep 28 '18 at 12:45
If I am passing headers then I am getting below error : ERR_CERT_AUTHORITY_INVALID @Damien Gilles – Ronak Joshi Sep 28 '18 at 13:00
ERR_CERT_AUTHORITY_INVALID mean that you navigator think the certificate used for https by the server is not trustworthy. Nothing to do on your side, you should contact api.upcitemdb.com. – Damien Gilles Sep 28 '18 at 13:09
I noticed you use /prod/trial maybe you should use /prod/v1 if you are not a trial user anymore – Damien Gilles Sep 28 '18 at 13:11
When I am using headers I am using this URL "https://api.upcitemdb.com/prod/v1/lookup". – Ronak Joshi Sep 28 '18 at 13:12

CORS error for request to api.upcitemdb.com endpoint

1 Answers1