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
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
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
3. Add ‘beforeSend’ parameter to the Ajax call
Add BeforeSend Parameter
4. Add crossDomain:true to the Ajax method
Add Cross Domain True
5. Add xhrFields to the Ajaxmethod
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’
Working in Chrome and Firefox
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
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
Awesome!! It works brilliantly….I just added one more thing to header i.e.
Good article!!!
add name=”Access-Control-Allow-Headers” value=”Origin, X-Requested-With, Content-Type, Accept”
Thank you Sunetra!
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.
Thank you Angelia.
instead of $.ajax, I am using $.post. With $.support.cors=true, it works fine on IE, but not in chrome.
What additional stuffs are required to do with $.post to have this working on chrome?