Wednesday, September 18, 2013

CORS throwing error when withCredentials is true

Cross-Origin Resource Shari (CORS) is a W3C spec that allows cross-domain communication from the browser. Almost most of the mobile app's you develop these days need to use CORS for cross-domain access of the web-services. You can find more information on CORS on : http://www.html5rocks.com/en/tutorials/cors/ .

 I had used CORS in many of my projects. To use CORS in EXTJS/Sencha Touch, you can create the request object as:
 var request = {
                                url: uri,
                                timeout: 120000,
                                useDefaultXhrHeader:false,
                                method: 'GET',
                                withCredentials:true,
                                scope:this
}             
Ext.Ajax.request(request);

While Using CORS and web-services together many a times you need to pass credentials or use the withCredentials attribute/config as indicated above.
But, It gave me an error indicating: "Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true." 

Basically, when you are using Cross Domain along with withCredentials set to "true", the server has to respond with:
Access-Control-Allow-Origin: (the origin url) and not with
Access-Control-Allow-Origin:*
WildCards are not allowed in this case.
So this is what I used on the server side:
headers['Access-Control-Allow-Origin'] = this.req.headers.origin;
Hope this helps!!!...

2 comments:

  1. I had same problem a few monthes ago.
    I think you need to request asynchronously.

    ReplyDelete
    Replies
    1. Yes, the Ajax request in sencha touch/EXTJs is asynchronous by default.

      Delete