ColdFusion CFC CORS and AJAX posts

Question

I'm trying to get a form posted to a remote server. The general idea, for now, is that the HTML will run locally and will post to a remote server via AJAX.

So there's a form, the JS and the CFC it's posting to.

Below is the JS

$(document).ready(function () {
$("#submit").click(function(){
    var setName = $("input[name='setName']").val();
    var setNumber = $("input[name='setNumber']").val();
    var setTheme = $("input[name='setTheme']").val();

    var retailPrice = $("input[name='retailPrice']").val();
    var purchaseStore = $("input[name='purchaseStore']").val();
    var purchaseDate = $("input[name='purchaseDate']").val();
    var purchasePrice = $("input[name='purchasePrice']").val();

    var condition = $("input[name='condition']").val();

    var sellPrice = $("input[name='sellPrice']").val();
    var sellStore = $("input[name='sellStore']").val();
    var selldate = $("input[name='selldate']").val();

$.ajax({
    type: 'get',
    url: 'http://www.chesteraustin.us/cfc/entry.cfc?ReturnFormat=json',  
    data: {
        method: 'setEntry',
        Set_Name: setName, //CFARGUMENT: JS_VARIABLE
        Set_Number: setNumber,
        Set_Theme: setTheme,
        Retail_Price: retailPrice,
        Purchase_From: purchaseStore,
        Purchase_Price: purchasePrice,
        Purchase_Date: purchaseDate,
        Status: condition,
        Sell_Date: sellPrice,
        Sell_from: sellStore,
        Sell_date: selldate
        },
    contentType: 'json',
    dataType: 'json',
    success: function(response) {
        console.log("you da man");
        }
    });    
}); 
});

Below is the CFC that it is being posted to (I've cut out a lot of it for brevity):

<cfcomponent>
<cfheader name="Access-Control-Allow-Origin" value="*" />
<cfheader name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE" />
<cfheader name="Access-Control-Allow-Headers" value="Content-Type" />

<cffunction name="setEntry" access="remote">
    <cfreturn 1>
</cffunction>

</cfcomponent>

EDIT: Cleaned up CFC, removed extraneous comments.

Doing research, I've come across that CFHEADER was supposed to go on top, to allow cross origin, however, Chrome still presents a No 'Access-Control-Allow-Origin' header is present on the requested resource. error.

A couple background things: I'm on a shared host. I have a blank Application.CFC in the folder that the CFC resides in.

I don't think it is your bug, but you have an HTML comment on top of your CFC. THat will break any JSON response. Remove it. — Raymond Camden
Also, I just tried your URL and I get an unsupported method error. — Raymond Camden
Ray, I removed the extra comment and cleaned up the CFC. I'm not sure how you were able to get an unsupported method error, but wouldn't the method be setEntry, which is the name of the function? — Chester
Oh, I got the error because I forgot to add the method to the URL. So - ignore. Btw, you have Robust Exception Info turned on. This is a security issue and you should disable it RIGHT now. — Raymond Camden
So, it seems right to me. It is hard to test locally as I don't have the arguments you want to satisfy the method. I suggest this. Comment out ALL the logic of the method, just return 1. Then we can test easier. Agreed? — Raymond Camden

Chester Chester · Accepted Answer · 2014-03-25T15:56:14

So after much research, I've figured out the solution. The ColdFusion code works as intended. However, there was something else controlling the headers (in this case, it was Apache).

Using http://enable-cors.org/server_apache.html as a guide, I modified my .htaccess file in my public_html directory with the following: Header set Access-Control-Allow-Origin "*". Chrome came up with another error, stating that Access-Control-Allow-Headers didn't have Content-Type, so I added that in as well: Header set Access-Control-Allow-Headers Content-Type. Lo and behold, that got it working.

In summary, if CORS on ColdFusion isn't working: <cfheader name="Access-Control-Allow-Origin" value="*" />, check the web server configuration. My .htaccess file now has two lines, and CORS is working now.

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers Content-Type

ColdFusion CFC CORS and AJAX posts

1 Answers