0

I want to write json api response like below into html code

 {
   "status": 200,
   "message": "OK",
   "data": {
   "total": 5
    }
 }

When I create js file to get the response, the result is empty. I have checked console mode on browser and find the warning like below

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://url-api. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Here's the javascript code

 $(function () 
{
$.ajax({
    url: 'https://url-api',
    type: 'GET',
    dataType: 'json',
    success: function (data) {

          //append each row data to datatable
        var data = +data.total;
        document.getElementById("total").innerHTML = data;
    }
  });
 })

Here's the html code

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="script.js"></script>

  <div class="inner">
          <h3 id="total"></h3>
          <p>Total</p>
        </div>

Do you know how to show the data total that I want from the api ?

Thank you

Ikram Shabri
  • 557
  • 1
  • 7
  • 19
  • Hi @RohanVeer , but how about the response result ? I'm still not get the result – Ikram Shabri Aug 08 '19 at 07:34
  • The api **server** you're trying to access has either no `Access-Control-Allow-Origin` header set, or it is set to a value not corresponding to your website – Baksteen Aug 08 '19 at 07:45
  • in a nutshell: you should add `crossDomain: true` to your `$.ajax` parameters. – Ulysse BN Aug 08 '19 at 07:46
  • 1
    @UlysseBN — No. That's almost **never** useful and won't help at all here. jQuery will normally add additional headers to a same-origin request that it won't add to a cross-origin request (because they would cause a preflight). If you make a same-origin request that gets redirected to a cross-origin request then it can' tell it is across-origin and will add them anyway. `crossOrigin: true` forces it to not add those headers to something that looks like a same-origin request. People hardly ever make same-but-redirected-to-cross-origin requests so it's exceptionally edge-casy. – Quentin Aug 08 '19 at 08:04
  • 1
    **Danger**: jQuery 1.x is unsupported and does not receive security updates. Upgrade to a supported version of jQuery. – Quentin Aug 08 '19 at 08:07

0 Answers0