Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Resolving CORS issues with Ajax requests

Posted: July 26, 2015
Written by: Saints At Play
Category: Javascript

Ajax makes life as a web developer a lot easier, particularly when used with a framework such as jQuery but, like all development related technologies, there will always be gotchas that can catch you unawares.

One of those is CORS...

CORS

Short for Cross Origin Resource Sharing, otherwise known as CORS, is a W3C specification that allows web servers to support secure communications between domains using the HTTP protocol.

These cross site HTTP requests are requests made from one domain for resources that reside on a different domain (such as web fonts, third-party CSS from a CDN, weather statistics or a product catalogue in the form of a JSON file for example). As cross site HTTP requests can present a security risk XMLHttpRequest (the object that allows Ajax to facilitate communications between the server and the browser) was, initially, limited to making HTTP requests to the domain it was loaded from. Known as the same-origin policy developers quickly found this limitation to be inefficient and restrictive when developing web applications and mash-ups that relied on third party data for its content.

CORS was born from this need for developers to be able to implement cross-domain communications within their websites and apps.

Implementing CORS

As a valid CORS request always contain an Origin header (which is controlled by the browser) the following must be added to your server's .htaccess file (this assumes that, A. you are using Apache to serve your website(s) through and B. you don't have administrative access to the Apache's httpd configuration file):

<ifmodule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</ifmodule>

This allows the Apache server to return a response header instructing the browser to accept requests from any origin (as denoted by the * wildcard character).

Although there is nothing wrong with using the wildcard character you may prefer to accept requests only from a specific domain (for the purposes of making your requests that bit more secure). To accomplish this you would add something like the following to your .htaccess file (changing the example URL to one of your own choosing):

<ifmodule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://sitename.suffix"
</ifmodule>

This adjustment provides finer control over which domain the browser will allow to accept cross-site HTTP requests for your website/app.

CORS and Cookies

An optional Origin header that can be implemented to allow cookies to be included in CORS requests (by default they are not) is the Access-Control-Allow-Credentials header:

<ifmodule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://sitename.suffix"
    Header set Access-Control-Allow-Credentials true
</ifmodule>

This header works in tandem with the withCredentials property of the XMLHttpRequest 2 object. Both must exist and be set to true in order for this CORS header to work. In order to use the withCredentials property in jQuery (as the de-facto choice for a JavaScript library) you would implement the following within the Ajax object (assumes jQuery version 1.5 and above):

$.ajax({
   url: cross-domain-url-to-request,
   xhrFields: {
      withCredentials: true
   }
});

The xhrFields object sets name/value pairs on the XHR object for remote communication, in this case to instruct the server that cookies are to be used for the CORS request (for the purposes of remote authorisation with the domain being requested for example).

One word of warning with the Access-Control-Allow-Credentials header however - If you don't need cookies to be sent with your CORS requests then do NOT add this header.

Setting CORS for specific file types

Say for example that we only wanted to retrieve web fonts and JavaScript files from different domains via Ajax for our website/app. Once again, assuming we are using Apache, we could accomplish this with something akin to the following in our .htaccess file:

<FilesMatch "\.(js|eot|otf|ttc|ttf|woff)$">
  <ifmodule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
  </ifmodule>
<FilesMatch>

Hopefully this will help any developers out there struggling with getting cross-site requests to work with Ajax.

Any comments or suggestions regarding this article please leave them below in the comments section.

Thanks for reading!

« Return to Posts

Comments

There are no comments

Posting comments after three months has been disabled.