Allow cross-domain AJAX access to your ColdFusion application
Problem
Browsers have security restrictions to (by default) prevent cross-domain AJAX requests. You can work-around this problem using JSONP, injecting a <script> tags into your pages, but this has limitations.
Solution
An alternate solution is to implement the draft Cross-Origin Resource Sharing mechanism. This involves configuring your server to allow browsers to have cross-domain access. This isn't supported by all browsers, but it is an effective way of allowing cross-domain scripting without resorting to the JSONP 'work-around'.
Detailed explanation
The code below is a simple example of how to make your requests available by cross-domain AJAX. Run the function at the start of every request, and you'll be in business. However, it is recommended that you understand the mechanism and tweak the responses to fit your specific circumstances. To debug the HTTP requests/responses between browser and server, I highly recommend using a tool such as Charles.
<cffunction name="allowCrossDomainAccess" returnType="void" access="public">
<cfset var stHeaders = getHttpRequestData().headers />
<cfif structKeyExists( stHeaders, "Origin" ) and cgi.request_method eq "OPTIONS">
<!---
Preflighted requests:
1. browser tells us it wants to make a non-basic x-domain request. Non-basic could mean it is a PUT, or contains custom headers, or a different content-type
2. based on what the browser tells us it wants to do, we respond and tell it what x-domain requests we allow
--->
<!--- x-domain requests from this host are allowed: * = any host allowed --->
<cfheader name="Access-Control-Allow-Origin" value="*" />
<!--- which http methods are allowed --->
<cfheader name="Access-Control-Allow-Methods" value="GET, POST, ACCEPT, OPTIONS" />
<!--- which custom headers are allowed --->
<cfheader name="Access-Control-Allow-Headers" value="X-Something-Custom, X-Something-Else" />
<!--- the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. 1728000 seconds is 20 days --->
<cfheader name="Access-Control-Max-Age" value="1728000" />
<!--- allow cookies? NB: when enabled, wildcard Access-Control-Allow-Origin is not allowed --->
<!--- <cfheader name="Access-Control-Allow-Credentials" value="true" /> --->
<!--- no further messing, just respond with these headers - the browser will cache these 'permissions' and immediately follow-up with the original request --->
<cfcontent type="text/plain" reset="true" />
<cfabort />
<cfelseif listFindNoCase("GET,POST", cgi.request_method)>
<!---
Simple GET requests:
When the request is GET or POST, and no custom headers are sent, then no preflight check is required.
The browser accepts the response providing we allow it to with the Access-Control-Allow-Origin header
We allow any host to do simple x-domain GET requests
--->
<cfheader name="Access-Control-Allow-Origin" value="*" />
</cfif>
</cffunction>
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
