0

All the answers that I've read so far were about making a xhr request, but that never works, because it gets blocked by the browser.

I've tried the following:

  $.ajax({
    url: "https://www.fly.faa.gov/flyfaa/usmap.jsp",
    type:"POST",
    data:"data",
    contentType:"application/json; charset=utf-8",
    dataType:"json",
    success: function(){
      alert("WORKS")
    }
  })

and

$.getJSON("https://www.fly.faa.gov/flyfaa/usmap.jsp", function(data) { 
    alert(data)
   })

also,

   $.get("https://www.fly.faa.gov/flyfaa/usmap.jsp", function(data) { 
        alert(data)
       })

They all return an error saying that the request is blocked, because ..Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In the book that I'm reading, the example they gave for getting a JSON string and using it for a Chrome extension is the following:

 $(document).ready(function() { 
     $("#btn").click(function() { 
         $("#info").html("Getting information...");
         var code = $("#airportcode").val();
         $.get("http://services.faa.gov/airport/status" + code + "?format=application/json", "", function(data) { 
             displaydata(data);
         })
     })
 })

This isn't making a xhr request, right? I wanna take the JSON string from the same website, but it's not working, it keeps returning the above mentioned error.

I even tried it as an extension, and edited the manifest file to permit the website, but the result was the same.

What am I doing wrong?

happy_story
  • 1
  • 1
  • 7
  • 17
  • The remote host does not allow CORS, it must explicitly allow access via javascript via cross origin headers. By default it will be blocked. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – mousetail Apr 08 '21 at 12:44
  • You'll need to allow cross-origin requests in the API side. – Sonu Bamniya Apr 08 '21 at 12:45
  • You can try putting the site in an iframe and injecting JavaScript. – noɥʇʎԀʎzɐɹƆ Apr 08 '21 at 12:47
  • You will need to use a proxy either on your server or third party service – charlietfl Apr 08 '21 at 12:47
  • @noɥʇʎԀʎzɐɹƆ You can't access a cross origin frame from parent page either – charlietfl Apr 08 '21 at 12:48
  • @mousetail well, why isn't the last snippet getting blocked then? – happy_story Apr 08 '21 at 13:18
  • @SonuBamniya I have no idea how to do that, and why is non of that required in my last snippet? – happy_story Apr 08 '21 at 13:19
  • There is a difference between making a xhr request, and just getting a JSON string from a URL, right? – happy_story Apr 08 '21 at 13:19
  • Apparently the other endpoint allows CORS – mousetail Apr 08 '21 at 13:20
  • So, besides how do I allow the CORS, another thing I've confused about is, which JSON string am I getting? In the last snippet, the `status` page is suppose to return information about flights, so, will `https://www.fly.faa.gov/flyfaa/usmap.jsp` this page return the same information? How do I know which page is going to return a JSON string? And also, is there a difference between making a xhr request, and trying to get the JSON string? Are they the same thing? – happy_story Apr 08 '21 at 13:52
  • Can you also tell me how do I allow access to these websites? I briefly read the duplicates, but I didn't see where is this explained. They all seem to refer to a server made by the user, and they are suggesting editing the PHP. I am talking about getting JSON string from another website. – happy_story Apr 08 '21 at 13:56

0 Answers0