I am trying to call external web service, its work fine in chrome, but not in firefox and IE. In chrome, it returns 'true', but in firefox, it returns '0 error', it here is my plete code...

 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#btnCall").click(function (event) {
            var campaignid = 1000007;
            var r_source_id = 1000008;
            var parameters = "{'CompanyName': '" + document.getElementById('txtCompanyName').value + "', 'name': '" + document.getElementById('txtName').value + "', 'title': '', 'email':'" + document.getElementById('txtEmail').value + "', 'phone':'" + document.getElementById('txtPhoneNo').value + "', 'web_url':'', 'no_of_emp':'0', 'c_Currency_id':'100', 'r_source_id':'" + r_source_id.toString() + "', 'industry_ID':'1', 'city':'', 'country_ID':'" + document.getElementById('ddlCountry').value + "', 'cur_solution':'','pur_timeline':'','ments':'', 'year_sell_erp':'2013', 'support':'', 'bpgroup_ID':'1', 'C_Campaign_ID':'" + campaignid.toString() + "', 'R_STATUS_ID':'1000033', 'C_Region_ID':'100', 'CreatedBy':'1000012', 'salesrep_id':'1000012', 'ad_org_id':'1000001', 'ad_client_id':'1000001', 'UpdatedBy':'100', 'AccessKey':'caff4eb4fbd6273e37e8a325e19f0991'}";
            $.ajax({
                type: "POST",
                url: ".asmx/SetLead",
                data: parameters,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (msg) {
                    AjaxSucceeded(msg);
                },
                error: AjaxFailed
            });
        });
    });
    function AjaxSucceeded(result) {
        alert(result.d);
    }
    function AjaxFailed(result) {
        alert(result.status + ' ' + result.statusText);
    }  
</script>

Here is I have upload this function URL for testing

I am trying to call external web service, its work fine in chrome, but not in firefox and IE. In chrome, it returns 'true', but in firefox, it returns '0 error', it here is my plete code...

 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#btnCall").click(function (event) {
            var campaignid = 1000007;
            var r_source_id = 1000008;
            var parameters = "{'CompanyName': '" + document.getElementById('txtCompanyName').value + "', 'name': '" + document.getElementById('txtName').value + "', 'title': '', 'email':'" + document.getElementById('txtEmail').value + "', 'phone':'" + document.getElementById('txtPhoneNo').value + "', 'web_url':'', 'no_of_emp':'0', 'c_Currency_id':'100', 'r_source_id':'" + r_source_id.toString() + "', 'industry_ID':'1', 'city':'', 'country_ID':'" + document.getElementById('ddlCountry').value + "', 'cur_solution':'','pur_timeline':'','ments':'', 'year_sell_erp':'2013', 'support':'', 'bpgroup_ID':'1', 'C_Campaign_ID':'" + campaignid.toString() + "', 'R_STATUS_ID':'1000033', 'C_Region_ID':'100', 'CreatedBy':'1000012', 'salesrep_id':'1000012', 'ad_org_id':'1000001', 'ad_client_id':'1000001', 'UpdatedBy':'100', 'AccessKey':'caff4eb4fbd6273e37e8a325e19f0991'}";
            $.ajax({
                type: "POST",
                url: "http://cloudservice.softwareonthecloud./service.asmx/SetLead",
                data: parameters,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (msg) {
                    AjaxSucceeded(msg);
                },
                error: AjaxFailed
            });
        });
    });
    function AjaxSucceeded(result) {
        alert(result.d);
    }
    function AjaxFailed(result) {
        alert(result.status + ' ' + result.statusText);
    }  
</script>

Here is I have upload this function URL for testing

• javascript
• jquery
• asp
• html
• web-services

Share Improve this question Follow edited Jan 15, 2013 at 5:28 Muhammad Akhtar asked Jan 9, 2013 at 16:05 Muhammad AkhtarMuhammad Akhtar 52.2k3737 gold badges139139 silver badges191191 bronze badges 14

• are you loading jQuery twice? – wirey00 Commented Jan 9, 2013 at 16:07
• 2 It appears as though you are trying to make a CORS request. jQuery does not support CORS requests in IE < 10, and in the old version of jQuery you are using, it probably doesn't work in firefox either. – Kevin B Commented Jan 9, 2013 at 16:10
• Is there any solution/trick, that it will work in Firefox? – Muhammad Akhtar Commented Jan 9, 2013 at 16:11
• There is a solution that will fix it in firefox and IE. Make a proxy script on your server (the one serving the page that makes the request) that requests data from the webservice for you. Have your client script request from your server, and your server requests from the webservice, thus avoiding the cross-origin problem. – Kevin B Commented Jan 9, 2013 at 16:13
• you know it is returning one 500 error even in chrome before the 200 success – Scott Selby Commented Jan 9, 2013 at 16:13

 |  Show 9 more ments

4 Answers 4

Sorted by: Reset to default 9 +50

You are getting this error cause you are trying to call a web service on another domain. This violates the Same origin policy. This is a security limitation. Most older browsers will deny such requests.

You will need to setup Cross-Origin Resource Sharing if you want to access a different domain the webservice in javascript.

Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request

If you have access to the webservice code, you can enable CORS requests at the server.
Enable cors is a good resource. Here is some explaination on cors

On IIS 7, you need to set a few custom headers in your web.config.

<system.webserver>
 <httpprotocol>
  <customheaders>
   <add name="Access-Control-Allow-Origin" value="*" />
   <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customheaders>
 </httpprotocol>
</system.webserver>

Here are the steps for IIS6

Security Note: For an example here, I have allowed all requests to the server. You may want to limit this to selected domains if you are serving sensitive data.

WCF based requests too can be inspected via the WebOperationContext.Current.IningRequest and appropriate headers can be sent out.

CORS requests are not supported on older browsers. You can see the full browser patibility list here

If you must support older browsers, or cannot change the webservice, you can always host a webservice proxy on your server. You send the request to your server, and your server requests the data from the original webserivce. This works fine, cause it does not violate the cross origin policy. A simple http handler can server as the proxy on your server.

Here is what a sample http handler proxy to a REST webservice would look like:

public void ProcessRequest(HttpContext context) {
  WebClient myClient = new WebClient(); 

  //Fetch response on your server
  string response = myClient.DownloadString("http://example./webservice/webMethod");

  // Send response to your javascript.
  context.Response.Write(response);
}

You could then call this handler as required from javascript.

Your request violates the Same Origin Policy.

Write a proxy service for the service in your own application. Post the data it receives to the remote service and relay the answer.

This'll have the extra advantage that you can keep the AccessKey private. You can add it to the request on your server before posting it to the remote server.

If this is way too much effort, ask the developers of the original service to also add a web page that calls it, on their server. Then you can add this web page in an IFrame.

You could also try using JSONP or easyXDM framework.

For JSONP you should only change one $.ajax attribute. Set dataType:"jsonp". In that case server should return json and function name, in this format: funcName(<JSON structure>). This is available for "GET" request only, but you are using "POST" here. You could try switch to "GET" request call.

If that is not possible you should consider using javascript easyXDM framework or CORS settings explained before, easyXDM has own cors ponent which enables it on older browsers.

I was also having issues with CORS in Edge... my web service worked in Chrome, Firefox, and older IE. Ultimately I had to update Edge and it worked. Here is the list of supported browsers / versions for CORS:

Enable CORS Browser Support