jQuery and cross domain AJAX requests

Posted Almost 10 years ago. Visible to the public.

When making cross-domain AJAX requests with jQuery (using CORS Show archive.org snapshot or xdomain or similar), you will run into issues with HTTP headers:

  • jQuery will not set the X-Requested-With header. On your server, requests will not look like AJAX requests (request.xhr? will be false).
  • jquery-ujs Show archive.org snapshot will not set CSRF headers.

This is by design and improves security.

In order to send those headers for specific hosts, add this piece of CoffeeScript directly after jQuery (but before jquery-ujs):

whitelisted = (url) ->
  for domain in ["http://trusted.host/", "https://another.trusted.host/"]
    return true if url.indexOf(domain) == 0
  false

$.ajaxPrefilter (options) ->
  if whitelisted(options.url)
    options.crossDomain = false
Tobias Kraze
makandra.de
Say thanks1
Last edit
7 months ago
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.

Related cards:

Cross-Domain Data with Rack and Rails | Union Station

Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is r...

Unobtrusive JavaScript and AJAX

Attached (see below) is some code to allow using unobtrusive JavaScript on pages fetched with an AJAX call.

After you included it, you now do not use the usual

$(function() { 
  $('.some_tag').activateStuff(); 
});

any more, but i...

Waiting for page loads and AJAX requests to finish with Capybara

If you're using the Capybara webdriver, steps sometimes fail because the browser hasn't finished loading the next page yet, or it still has a pending AJAX request. You'll often see workarounds like

When I wait for the page to load
Then .....

Capybara: Waiting for pending AJAX requests after a test

When ending a Selenium test Capybara resets the browser state by closing the tab, clearing cookies, localStorage, etc.

It may be a good idea to wait for all in-flight AJAX requests to finish before ending a scenario:

  • You may have client-side...

jQuery promises: done() and then() are not the same

jQuery's deferred objects behave somewhat like standard promises, but not really.

One of many subtle differences is that there are two ways to chain callbacks to an async fu...

Problems with Rails 3 Remote Links and Forms Using jQuery .live() in IE

There is a problem with AJAX response handling for Rails 3 remote links and forms in Internet Explorer. This problem affects applications still using jQuery 1.4.2.

The Difference Between jQuery’s .bind(), .live(), and .delegate()

The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications.

Apache: Redirect all requests from one host to another

In order to redirect all requests from redirecting-host.com to desired-host.com while keeping path and query params unchanged, change your Apache VHost to something like this:

ServerName desired-host.com
ServerAlias redirecting-host.c...

Detect mobile or touch devices on both server and client

Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will wan...

Preloaders.net - AJAX loading GIF and APNG spinners, bars and 3D animations generator

Generated animations are free to use without backlink obligations...

... WITH THE EXCEPTION of any other animated images generator applications

Haha :)

Posted by Tobias Kraze to makandra dev (2014-07-17 08:22)
This website uses short-lived cookies to improve usability.
or learn more