5

JQuery Ajax ‘Post’ not working in Chrome and Firefox

When I was using jQuery Ajax( ) to request an asmx web service with some input parameters it worked fine on IE (Internet Explorer), but not on Chrome and Firefox. I have done quite a bit of research and found few work arounds for this. This post assumes that  you are working on a SharePoint environment ( or .net) and making these webservice calls across domains.

Reason for failure: Cross-Origin Resource Sharing (CORS).

To explain in simple terms, if a request is being posted to a domain different than that of the client it fails in Chrome or Firefox; except for IE. As IE approves such communication by default. But most other browsers don’t. CORS enables AJAX requests to be posted to a domain different than that of the client.This type of requests are treated to as a security threat and has been denied by most of the browsers. And such a handshake should be done at server level.

The following post drives you through possible solutions and changes to the script respectively.

Original JQuery script

Original JavaScript Code

Original JavaScript Code

All below solutions are valid, they seemed to have worked for many readers and are marked as answers on various blogs. I am summarizing all these here even if they did not work for me, as they might work for you!

1. Add jQuery.support.cors = true;

Add Jquery.Support.Cors= true

Add Jquery.Support.Cors= true

Initially even IE did not respond for the Ajax requests. When the above line is added IE started responding.

‘cors’ is equal to true if a browser can create an XMLHttpRequest object and if that XMLHttpRequest object has a withCredentials property.To enable cross-domain requests in environments that do not support cors yet but do allow cross-domain XHR requests.

2. Add empty ‘data’ parameter to the ajax call

I cannot use this solution, as I have input parameters and data cannot be empty as show above

Empty Data Element

Empty Data Element

3. Add ‘beforeSend’ parameter to the Ajax call

Add BeforeSend Parameter

Add BeforeSend Parameter

4. Add crossDomain:true to the Ajax method

Add Cross Domain True

Add Cross Domain True

5. Add xhrFields to the Ajaxmethod

Add XHR Fields

Add XHR Fields

The ‘xhrFields’ property sets additional fields on the XMLHttpRequest. This can be used to set the ‘withCredentials’ property.Set the value to ‘true’ if you’d like to pass cookies to the server. If this is enabled, your server must respond with the header Access-Control-Allow-Credentials: true’.

6.Change Button type to Submit

Not working in Chrome and Firefox

Input Type='button'

Input Type=’button’

Working in Chrome and Firefox

Input Type='submit'

Input Type=’submit’

Sorry if the above solutions disappointed you. Let me provide the solution that worked for me. Please understand that this solution is valid only for ASP.NET WebService application only. Modify the following sections on web.config file of the web service to

Web.Config Changes

Web.Config Changes

NOTE: Use Access-Control-Allow-Origin value* in header only on chosen URLs that need to be accessed cross-domain. Don’t use the header for the whole domain.

References or Useful resources:

1. http://encosia.com/using-cors-to-access-asp-net-services-across-domains/

2. http://www.html5rocks.com/en/tutorials/cors/

3. http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

4. https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet

5 Comments

  1. Awesome!! It works brilliantly….I just added one more thing to header i.e.

    Good article!!!

  2. Well it was an incredibly fascinating blog post.Thank you for posting such an information with us.I hope you certainly will continue on enlightening individuals in future as well,with the help of this type of beneficial information.Carry on the brilliant task.

Leave a Reply