Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CORS (Cross-Origin Resource Sharing) with Ajax

DZone's Guide to

CORS (Cross-Origin Resource Sharing) with Ajax

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

Cross origin resource sharing (CORS) allows resources from a web server to be accessed from a web page on another domain. The XMLHttpRequest level 2 specification added support for making cross domain requests but it should be noted that this specification is still a working draft. Traditionally I have always made cross domain requests from sites in a two stage process: 1) make a request to the server hosting the local domain for some data which then 2) makes the cross domain request, receives the response and returns this to the client. Now this process has merits, if you are hitting an external API chances are the service providers won’t be too impressed with you making a request for each user that visits your site and may even limit this. I wrote a nice little PHP class that can be used to avoid this by caching results locally but I’m going to pretend this isn’t an issue, just for today.

Making the request

For the cross origin request to work the remote origin needs to specify that it permits it’s resources to be accessed remotely with the Access-Control-Allow-Origin header. This header can either list the permitted domains or specify a wildcard (*) to allow all domains access to the specified resources. The browser must then set and send the ORIGIN header in the request to validate the domain making the request is permitted. To send cookies, HTTP authentication and client side SSL certificate information with the request you must switch the withCredentials flag to true on the XMLHttpRequest instance and the remote domain must have the Access-Control-Allow-Credentials header also set to true.

var xhr = new XMLHttpRequest;
xhr.open("GET", "http://example.com", true);
xhr.withCredentials = true; // send cookies, http auth etc
xhr.send();

Preflight request

The cross origin request for what is indirectly termed in the spec as “not simple”—using methods like PUT and DELETE—are completed in two stages; A preflight request which basically makes checks with the remote origin that the request being made is valid and then the actual request if the preflight validates. The preflight request is made with the OPTIONS HTTP method and breaks down the credentials of the request in a set of Access-Control-Request-* headers such as:

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Requested-With X-File-Name

Nicholas C. Zakas has written a more detailed post which I suggest you read and of course it’s always interesting to keep an eye on how the specification evolves. I have written and continue to develop a small Ajax library which supports CORS that you may also want to have a play with.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Phil Parsons, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}