This is a migrated thread and some comments may be shown as answers.

Possible CORS error calling my API using $.ajax

7 Answers 970 Views

General Discussion

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Young asked on 01 Dec 2013, 08:25 AM

I'm using Icenium to develop a native app. Currently just built one sample hybrid application using icenium (www.icenium.com) to call API using jQuery ajax, but still getting some errors saying "Possible CORS error!" in Icenium.

I've read through how I can implement CORS headers to allow cross domain ajax, however seems it is still not working in my native app built through icenium.

Here's my response header:

Content-Length: 76 
Content-Language: en 
Status_code: 200
Vary: Accept-Language, Cookie 
Allow: GET, POST, PUT 
Date: Sun, 01 Dec 2013 08:22:56 GMT 
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Content-Type: application/json 
X-Frame-Options: SAMEORIGIN

Does any one see any problems? This API call works just fine in my browser (as an web app) but not on Mist and the build app on my android. It returns $.ajax.error function.

7 Answers, 1 is accepted

answered on 03 Dec 2013, 09:50 AM

Hi Young,

We have implemented Rest and WebAPI WCF services for Icenium and both work in Graphite and Mist and work in iOS/Android & Blackberry. We only allow specific domains to gets a 200 response rather than anyone which * allows.

Every call must return a pre-flight OK before returning data. You might have to use JSON-P if it's not your data service but that approach is limited if you want to return meaningful Status codes etc.

A WCF REST API approach is shown below, not saying it's perfect but it does work fine with HTTPS :-)

SERVICE

        public dtCustomer GetCustomerDetails(string CustomerID)
        {

            try
            {

                // Check for browser pre-flight CORS request

                if (WebOperationContext.Current.IncomingRequest.Method == "OPTIONS")
                {
                    AllowCORS();
                    return null;
                }

       Get Data
       AllowCORS(); -- SEND back 200 again or the browser will grumble
                Return Customer;

        private void AllowCORS()
        {

            // Get the request headers
            WebHeaderCollection headers = WebOperationContext.Current.IncomingRequest.Headers;

            if (IsCORSAllowed(headers["Origin"]))
            {
                // Allow the cross domain call
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", headers["Origin"]);
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "GET");
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST");
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept, SomethingCustom");

                // Stop ajax caching the responses on Safari/iOS
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Pragma", "no-cache");
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "no-cache");
                WebOperationContext.Current.OutgoingResponse.Headers.Add("Expires", "0");
            }
        }

        private bool IsCORSAllowed(string RequestURL)
        {

            try
            {

                if (RequestURL != null)
                {
                    List<string> SafeHosts = new List<string>(ConfigurationManager.AppSettings["CORSRequest"].Split(';'));
                    return SafeHosts.Any(RequestURL.Contains);
                }
                else
                {
                    return false;
                }
            }

CLIENT:

                       $.ajax({
                   type: "POST",
                   url: "https://MyURL:MyPort/MyService.svc/GetCustomer",
                   contentType: "application/json",
                   beforeSend: function (xhr) {
                       xhr.setRequestHeader('Somethingtopass', SomeValue);
                   },
                   data: JSON.stringify(e.dataItem.CustomerId),
                   dataType: "json",
                   cache: false,
                   success: function(msg) {
                       customerResponse(msg);
                   },
                   statusCode: {
                       400: function(jxhr, textStatus, errorThrown) {
                       },
                       401: function() {
                       }
                   },
                   error: function(jqXHR, textStatus, errorThrown) {
                       // general error
                   }
               });

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Possible CORS error calling my API using $.ajax

7 Answers, 1 is accepted