eBay API calling getSingleItem through Javascript returns 'Origin localhost:8888 is not allowed by Access-Control-Allow-Origin' error

Question

When I run the code on my laptop as a file on my browser it's just fine, everything is working, but when I put the file on wamp or on a live server the JavaScript doesn't work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="index.html">Home</a></li>
        <li role="presentation" class="active"><a href="addItem.html">Add Item</a></li>
     <ul class="nav navbar-nav navbar-right">
    <li role="presentation"><a href="logout.html">Log Out</a></li>
    <li role="presentation" class="disabled"><a href="logout.html"></a></li>
    </ul>
    </ul>


    <div class="row">
     <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Item Id ..." id="itemID">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="buttonPress()">Go!</button>
      </span>
    </div><!-- /input-group -->
     </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->


    <div id="print"></div>
    <div id="button_addItem">
        <button type="button" class="btn btn-default">Add Item</button>
    </div>
   <script> // My code here </script>
</body>
</html>

I am using the EbayAPI getSingleItem. This is my JavaScript:

function buttonPress() {
    var ItemID =  document.getElementById("itemID").value;
    var xmlhttp = new XMLHttpRequest();
    var url = "http://open.api.ebay.com/shopping?callname=GetSingleItem&responseencoding=JSON&appid=myAPPID&siteid=77&version=515&IncludeSelector=ShippingCosts,Details&ItemID="+ ItemID;

    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
       myFunction(xmlhttp.responseText);
     }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function myFunction(response) {
     var arr = JSON.parse(response);
     var out = "<div><table id='addItemTable'>";
     out += "<tr><td id='GalleryURL'>";
     out += "<img src=' " +arr.Item.PictureURL+ "' width='200' heigth='200'>";
     out += "</td><td><ul type='none'>";
     out += "<li id='Title'><a href= "+arr.Item.ViewItemURLForNaturalSearch + ">" +arr.Item.Title +"</a></li>";
     out += "<li id='ItemID'>" +arr.Item.ItemID +"</li>";
     out += "<li id='Quantity'>Quantity: "+arr.Item.Quantity+"</li>";
     out += "</ul></td><td><ul type='none'>";
     out += "<li id='ConvertedCurrentPriceValue'>EUR:                     "+arr.Item.ConvertedCurrentPrice.Value +"</li>";
     out += "<li><b>Price inc. shipping:     0.00</b></li>";
     out += "<li>Shipping:                0.00</li>";
     out += "<li>Our Shipping:            0.00</li>";
     out += "<li>Profit:                  0.00</li>";
     out += "<li>Fees:                    0.00</li>";
     out += "</ul></td></tr>";
     out += "<tr><td></td><td></td><td><ul type='none'>";
     out += "<li><b>EUR Total:               "+arr.Item.ConvertedCurrentPrice.Value +"</b></li>";
     out += "<li>" +arr.Item.CurrentPrice.CurrencyID + ": " +arr.Item.CurrentPrice.Value + "</li>";
     out += "</ul></td></tr></table></div>";

    document.getElementById("print").innerHTML = out;
}

Edit:

Error message in browser console is the following:

[Error] XMLHttpRequest cannot load open.api.ebay.com/…. Origin localhost:8888 is not allowed by Access-Control-Allow-Origin. (addItem.html, line 0)

I presume that you have replaced `appid=myAPPID` with your eBay API credentials? — Duncan Tidd, Aug 29 '15 at 14:13
Yeap!!! everything works great when i run the html file, but not when i run it on the server!! — Kyriakos Geroudes, Aug 29 '15 at 14:21
You might be interested in this SO question: http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin — Duncan Tidd, Aug 29 '15 at 14:41
[Error] XMLHttpRequest cannot load http://open.api.ebay.com/shopping?callname=GetSingleItem&responseencoding=JSON&appid=Kyriacos-b20f-46cc-b923-b6f7f58793fc&siteid=77&version=933&IncludeSelector=ShippingCosts,Details&ItemID=271968492756. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin. (addItem.html, line 0) — Kyriakos Geroudes, Aug 29 '15 at 14:42
There's also a typo in the following line: `out += "";`. That won't be what's causing the problem though. It would be the cross domain ajax call. Unfortunately I can't post an answer because it's Saturday and I'm drinking :). I'll probably screw the answer up. — Duncan Tidd, Aug 29 '15 at 14:48
@DuncanTidd it works when i run the chrome --disable-web-security. but is that the answer? every time someone goes to the page will have to start his browser with the web security disable? Btw thnx for your response :P — Kyriakos Geroudes, Aug 29 '15 at 15:00

eBay API calling getSingleItem through Javascript returns 'Origin localhost:8888 is not allowed by Access-Control-Allow-Origin' error

0 Answers0