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
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;
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
3. Add ‘beforeSend’ parameter to the Ajax call
4. Add crossDomain:true to the Ajax method
5. Add xhrFields to the Ajaxmethod
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
Working in Chrome and Firefox
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
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: