Get Header info in cross domain ajax call

Question

I am trying to validate an image URL if it still holds the image or not by making ajax call to that URL. One problem is the image server is on a different domain so I am using crossDomain:true attribute in my ajax call. Here is what I have tried so far:

function checkFunc(){
  $.ajax({ 
        url: 'https://www.google.co.in/images/srpr/logo11w.png', 
        dataType: 'image/png',
        crossDomain: true,
        timeout: 5000,
        error: function(e, status, settings){
            alert('ERROR: '+JSON.stringify(e));
        },
        success: function( e, xhr, settings ) {    
            alert('SUCCESS: '+JSON.stringify(e));
        }   
    });
}

But its not working. Also a concern is the images are not confined to a single format, i.e. the image can be png/jpg/gif or any other so I need to have a broader dataType to accept any kind of image.

I have also tried using jsonp, but that gives me error as "Refused to execute script from because its Mime type(image/jpeg) is not executable.

Edit: I cannot run server script from my ajax function which in turn calls the cross domain page, as in php getcontents

Answer 1

You have to set up the image server to allow cross-origin requests. To do that you need to set the a Header on the server holding the images like this:

Header set Access-Control-Allow-Origin "*"

You can replace the * with your specific domain, in fact you should, otherwise anyone can do a cross-origin request on your image server.

Answer 2

• The 'xhrFields' property sets additional fields on the XMLHttpRequest.
• This can be used to set the 'withCredentials' property.
  Set the value to 'true' if you'd like to pass cookies to the server. If this is enabled, your server must respond with the header 'Access-Control-Allow-Credentials: true'.

It may help to you

Answer 3

You can do one thing for that just need to set Access-Control-Allow-Origin & Access-Control-Allow-Headers

 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" />

If you want to allow only for specific domain , you can do that with specific value of domain instead of * value