Categories

Cross Domain AJAX Request

Posted on: October 2, 2016 by Dimitar Ivanov

A common problem for developers is a browser to refuse access to a remote
resource. Usually, this happens when you execute AJAX
cross domain request using jQuery Ajax interface, Fetch API, or plain
XMLHttpRequest. As result is that the AJAX request is not performed and data
are not retrieved.

Figure 1. The same-origin policy restriction in effect

Same-Origin Policy

This is a security policy who defines the rules of how a web page can
access an external resource (e.g. fonts, AJAX requests). Under the
same-origin policy, web browsers do not
permit a web page to access resources who origin differ than that of the
current page. The origin is considered to be different when the scheme,
hostname or port of the resource do not match that of the page. Overcoming
the limitations of same-origin security policy is possible using a technique
called Cross-origin resource sharing or simply
CORS.

Cross-Origin Resource Sharing

CORS is a mechanism that defines a procedure in which the browser and
the web server interact to determine whether to allow a web page to access
a resource from different origin.

Figure 2. Cross domain ajax request

When you do a cross-origin request, the browser sends Origin header with the current domain value.

Origin: http://zinoui.com

When the server receives the request, check whether the origin header is within the allowed list, and sends a response with Access-Control-Allow-Origin

2. Preflighted requests
Setting custom headers to XHR triggers a preflight request. With simple words this mean that preflight request first send an HTTP request by the OPTIONS method to the resource on the remote domain, to make sure that the request is safe to send. According W3C for non same origin requests using the HTTP GET method a preflight request is made when headers other than Accept and Accept-Language are set.

3. Request with credentials
By default, for non same origin request, browsers will not send credentials (such as HTTP Cookies, HTTP Authentication and client-side SSL certificates).
A specific attribute has to be set on the XMLHttpRequest object when it is invoked.

If you have any questions about cross-domain AJAX requests
or CORS
itself, leave a comment below. And do not be shy to share this article. Thanks
so much for reading!

Dimitar Ivanov

Dimitar Ivanov is a senior LAMP developer, javascript engineer, web performance-obsessed.
He is programming since 2003 and loves to build web applications.
You can find him on Twitter,
LinkedIn and
GitHub.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.

i trying to get json object format like {"name":"value","name":[{"name1":"A","name":"B"}]} from other server as cross domain data received success but displaying time
console.log(data); i am getting SyntaxError: missing ; before statement

Using the jQuery load() method, I wish to load from my website http://localhost/source, as follows the specified URL but I get an error “XMLHttpRequest cannot load… No 'Access-Control-Allow-Origin' header…”:

@Mike In your case localhost:8080/destination is the remote resource, so that is the place where Access-Control-Allow-Origin header must be presented in the server response. See how (use your prefered method):

I am accessing cross domain resource and it has one request header and am passing that.There is no credentials required but somehow when I access this it prompts for username and password.How to bypass this?

@Dimitar lvanov
I am having trouble in here, it has been like two days. i am using phonegap, and i am trying to do ajax call to my own test server using jsonp because i tried json and did not work, on ripple and Mozilla it works perfectly, but once i build it, on my android it throws parser error..on IE as well throws the same error. this how im doing the call
type: 'GET',
url: 'http://xxx/',
data: datap,
contentType: "application/json; charset=utf-8",
headers: {"X-My-Custom-Header": "some value","X-Requested-With": "XMLHttpRequest"},

I keep getting the Cross-Origin request blocked when I use xmlhttprequest. Our web server is hosted by someone else. What kind of parameter do I ask them to set on the web server to allow Access-Control-Allow-Origin?