Sencha Touch 2 and WCF REST with SSL

[montymccune]

I'm sorry - I've seen a bunch of posts on this subject but I still cant seem to get anywhere

I have an existing WCF REST web service that is currently being used for an iPad application and I am trying to figure out how to return the JSON response in Sencha Touch 2. I have tried MANY different approaches, but here is my current one:

        Ext.Ajax.request({
            url: 'https://ADDRESSTOSERVICE/user.svc/user/name/' + vals.loginUsername + '/password/' + vals.loginPassword,
            headers: {
                'Authorization': 'Basic ' + Base64.encode(vals.loginUsername + ':' + vals.loginPassword),
                "Content-type": "application/json; charset=utf-8",
            },
            params:{
                username: vals.loginUsername,
                password: vals.loginPassword
            },
            success: function(form, result){
                console.log("SUCCESS");
            },
            failure: function(form, result){
                console.log("FAILED");
            }
        });

In CHROME I am getting :Failed to load resource: Resource failed to load followed by the url

If I click on the error URL, my expected JSON response is displayed in the browser window. This is intended to go cross-domain. I can successfully call this service with Fiddler and get the expected response.
I dont know if this is enough info to help- if not please let me know and I can supply more. Thanks!

[mitchellsimoens]

So this is going to go cross origin, are you using CORS?

[montymccune]

I'm pretty new to all this - but I have read a bit through this forum concerning CORS. Is it basically just sending back the proper headers from the server? If I had a message call in WCF like this:

[WebGet(UriTemplate = "user/{id}", ResponseFormat= System.ServiceModel.Web.WebMessageFormat.Json)]
public OD_User Get(string id)
{
var constring = System.Configuration.ConfigurationManager.ConnectionStrings["ODPhoenixConnectionString"];
var db = new ODPhoenixDataContext(constring.ConnectionString);
return db.OD_Users.FirstOrDefault(p => p.UserID == Convert.ToInt64(id));
}

where would I set OR inject the headers? Sorry, I know this isn't a C# forum Also, From what I understand, when you submit a call to a service - something called a pre-flight message is sent and this is where the headers are returned - is this correct? Where would I determine on the Sencha side if those headers were set correctly (event or something)? Sorry for all the questions, but this is for work and I'm on a deadline

thanks again,
monty

[mitchellsimoens]

I return the headers on all requests.

[montymccune]

so I have added the following headers to my OUTGOING service response:
"Access-Control-Allow-Origin", "*"
"Access-Control-Request-Method", "POST,GET"
"Access-Control-Allow-Headers", "X-Requested-With"

Is that right? I have the options of adding the headers to Outgoing request/ response or Incoming request/ response.

[montymccune]

so I think I've added the headers somewhat correctly. Here is what Chrome is telling me when I try to connect:

FIRST I get one of these:

• Request URL:
  https://myserveraddress/phoenix/user.svc/user/name/pmccune/password/012153?_dc=1334344959560
• Request Method:
  OPTIONS
• Status Code:
  401 Unauthorized
• Request Headersview source
  
  • Accept:
    */*
  • Accept-Charset:
    ISO-8859-1,utf-8;q=0.7,*;q=0.3
  • Accept-Encoding:
    gzip,deflate,sdch
  • Accept-Language:
    en-US,en;q=0.8
  • Access-Control-Request-Headers:
    origin, authorization, x-requested-with
  • Access-Control-Request-Method:
    GET
  • Connection:
    keep-alive
  • Host:
    192.168.0.99
  • Origin:
    http://originaddress
  • Referer:
    http://originaddress/PhoenixTouch/
  • User-Agent:
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19
• Query String Parametersview URL encoded
  
  • _dc:
    1334344959560
• Response Headersview source
  
  • Access-Control-Allow-Headers:
    origin, authorization, x-requested-with
  • Access-Control-Allow-Origin:
    http://originaddress
  • Access-Control-Request-Method:
    POST, OPTIONS, GET
  • Cache-Control:
    private
  • Content-Length:
    37
  • Content-Type:
    application/xml; charset=utf-8
  • Date:
    Fri, 13 Apr 2012 19:22:39 GMT
  • Server:
    Microsoft-IIS/7.5
  • X-AspNet-Version:
    4.0.30319
• X-Powered-By:
• ASP.NET
  

Then I get one of these:
Request URL:
https://myserveraddress/phoenix/user.svc/user/name/pmccune/password/012153?_dc=1334344959560
Request Headersview source

Authorization:
Basic cG1jY3VuZTowMTIxNTM=


Origin:
http://originaddress


Referer:
http://originaddress/PhoenixTouch/


User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19


X-Requested-With:
XMLHttpRequest
Query String Parametersview URL encoded

_dc:
1334344959560




In my chrome console I get:

• OPTIONS https://myserveraddress/phoenix/user.svc/user/name/pmccune/password/012153?_dc=1334344959560 401 (Unauthorized)

XMLHttpRequest cannot load https://myserveraddress/phoenix/user.svc/user/name/pmccune/password/012153?_dc=1334344959560. Origin http://originaddress is not allowed by Access-Control-Allow-Origin.
Login.js:61SUCCESS



Heres a question - where does the appended querystring "?_dc=1334344959560" come from? I am not adding this.


thanks again for your quick reply.

[mitchellsimoens]

The _dc param is added by Sencha Touch to make sure there are no caching scenarios. It stands for disable caching