0

I need to send a get request to a company internal website on client side. Here is my code:

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type='text/javascript'>
$(document).ready(function () {
    var url = 'https://jsonplaceholder.typicode.com/photos'; //working
    //var url = 'xxxxxxx'; //internal url (returns json), not working
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true)
    xhr.onload = function () {
        if (xhr.readyState === xhr.DONE) {
            console.log(xhr.response)
            console.log(xhr.responseText)
        }
    }
    xhr.send()
})
</script>
</head>

This works fine with a test url that I put in (of course, having different domain than my server), meaning that it works fine with CORS request.

However, it doesn't work with the internal company url. The error I got is “No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'abc'(my server) is therefore not allowed access.”

My question: What caused the error? Why my CORS request works with one website but not the other? Is there some restrictions on my company's internal website, e.g. my server is not whitelisted on its "origin firewall"?

Interesting enough, it works (i.e. I'm able to get the json response) if I use ajax and set dataType to jsonp. But of course, because the returned data is json not jsonp, I got a different error saying "unexpected token :". This made me to doubt myself. If it was something placed by the internal website, why does ajax/jsonp trick work?

The ajax code below works - it got valid json response. However, because the returned data is json not jsonp, I got a different error (as I expeted).

$.ajax({
    url: 'xxxxxxx', //internal url (returns json)
    dataType: 'jsonp',
    success: function( response ) {
        console.log( response ); // server response
    }
});
Feiiiiiiiiiiiii
  • 395
  • 2
  • 15
  • 1
    You need to set header for that. – Zaid Bin Khalid Apr 16 '18 at 00:34
  • the header needs to be set on the server you are trying to access to allow you to do this...its a security mechanism – Ctznkane525 Apr 16 '18 at 00:35
  • @Ctznkane525 Thank you. That's what I thought. But do you know why ajax/jsonp trick works? – Feiiiiiiiiiiiii Apr 16 '18 at 00:48
  • `internal url` - sure, internal, but is it same origin? clearly it isn't if you get a CORS error – Jaromanda X Apr 16 '18 at 00:58
  • `ajax/jsonp trick` what is an ajax/jsonp trick? you said it works, yet it doesn't by your own admission you get an error anyway – Jaromanda X Apr 16 '18 at 00:59
  • @JaromandaX Thanks for looking at my question! I just had ajax code added. Correct it's internal but different origin, as I pointed out. However, I thought my code handles CORS. It works fine with 'https://jsonplaceholder.typicode.com/photos' which is different origin / CORS too. – Feiiiiiiiiiiiii Apr 16 '18 at 01:04
  • yeah, but as you've read now, CORS is handled by the server, not by the client :p – Jaromanda X Apr 16 '18 at 01:07
  • Sorry I don't quite understand. Then why does my ajax request work (able to get across CORS and get data back)? – Feiiiiiiiiiiiii Apr 16 '18 at 01:12
  • jsonp doesn't use XHR, it appends a – kicken Apr 16 '18 at 01:16
  • @kicken - Thank you. So I should ask the owner of the internal website to add my server to the whitelist? – Feiiiiiiiiiiiii Apr 16 '18 at 01:29
  • @Feiiiiiiiiiiiii yes, they need to add an appropriate `Access-Control-Allow-Origin` header to the response. – kicken Apr 16 '18 at 01:47

0 Answers0