PDA

View Full Version : POST method call cross-domain to return XML



cliffy79
23 Feb 2012, 12:30 PM
I have a scenario where I'm writing an application that needs to authenticate to a server on a different domain than the one I'm developing on. The server requires a POST method call with username/password parameters and return XML. Unfortunately, I can't change the server configurations and response.

I've read in multiple areas that one approach is to use the ScriptTagProxy to execute cross-domain calls, but unfortunately, this application isn't using JSON and needs to do a POST method call, which the ScriptTagProxy doesn't support. I've also tried using HttpProxy, but that needs to be on the same domain, Are there any other workarounds? I've also tried changing my DNS in /etc/hosts to have localhost point to the other domain and looking into changing CORS config.

Been banging my head on this for several days...Any ideas on how I can get around this or is this not possible at all?

-Cliff

mitchellsimoens
23 Feb 2012, 12:42 PM
CORS is really your only option but that is going to require the server to support it.

cliffy79
23 Feb 2012, 1:53 PM
I know this isn't in the realm of ExtJS, but if I got the server to support CORS, I would also have to modify my request headers client-side, correct?

mitchellsimoens
23 Feb 2012, 1:57 PM
Ext.Ajax.request can accept a cors config that should enable this for you

cliffy79
23 Feb 2012, 4:00 PM
Ext.Ajax.request can accept a cors config that should enable this for you

Thanks Mitchell, so I was able to have our server enable cors as well in my Ext.Ajax.request(). However, when I make the request, I'm receiving an OPTIONS error in the request. My 'Origin' in the request header is still showing my localhost (127.0.0.1), even after trying to set 'headers'. Is there a way to set the request headers in Ext.Ajax.request()?

Here's my code:


Ext.Ajax.request({
url : 'http://www.domain.com/logon',
method: 'POST',
cors :true,
params : {username: usernameFieldText, password: passwordFieldText},
headers : {
'Origin': 'www.domain.com'
},
success: function (response) {
console.log(response.responseText);
},
failure: function (response) {
console.log("fail" + response.responseText);
}
});

skirtle
23 Feb 2012, 6:02 PM
When using CORS I tend to set the following options:


Ext.Ajax.cors = true;
Ext.Ajax.useDefaultXhrHeader = false;

The first one makes all requests use CORS. The second one avoids the need for an OPTIONS check.

However, if your server is configured to only allow CORS requests from a certain domain then you can't fake it in the JavaScript (it's a security feature after all, they can't just let you change it). If the server can't be changed to allow requests from an origin of localhost then you could fake it locally using an entry in your hosts file.

cliffy79
24 Feb 2012, 10:06 AM
@skirtle

Thanks for that tip! That solved my problem

cliffy79
24 Feb 2012, 10:15 AM
Btw, I noticed that I was setting these two properties earlier but it didn't work:

Code:


Ext.data.Connection.cors = true;
Ext.lib.Ajax.useDefaultXhrHeader = false;

I'm guessing it's because the 'cors' and 'useDefaultXhrHeader' properties need to be set in Ext.Ajax?

cliffy79
24 Feb 2012, 12:16 PM
For other people out there that encounter this, you can also use the following with a data store:



Ext.Ajax.cors = true;
Ext.Ajax.useDefaultXhrHeader = false;

var userStore = new Ext.data.Store({
model: 'UserModel',
proxy: new Ext.data.proxy.Ajax({
actionMethods: 'POST',
type: 'xml',
url: 'http://www.mydomain.com/logon',
extraParams : {username: usernameFieldText, password: passwordFieldText},
reader: {
type: 'xml',
record: 'logon'
}
})
});

userStore.load();

slemmon
7 Sep 2012, 1:52 PM
This just solved my problem with an Ajax request with cors:true. Worked fine in IE and I could see the headers coming back right from the server, but Firefox 11 would choke. Other CORS tests in Firefox worked ok for me. Any chance this could be looked at by Sencha to see if a more elegant solution is available than the developer setting the private property of useDefaultXhrHeader to false?