How to Call webservices using Jquery+Ajax

▲
0
▼

I am having problem with my Jquery+ajax call that will consume one of my web service method via cross domain. i have been trying all the possible way to accomplish but still no success. please help me with what i am doing wrong. may be i need to configure web server for some security settings? below is my code. please let me know if you have any question regarding with my code.

I added this in web.config of my web service.

    <system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

and this to my application

$(document).ready(function() {
    $.support.cors = true;
        $.ajax({
            url:'http://si-cb01:10000/service1.asmx/GetJsonData',
            type: 'GET',
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json", // change data type to jsonp
            success: function (response) {
                alert(response.d);
                Result = response.d;
            },
            error: function (response) {
                alert("Error");
            }
        });
    });

IE Console showed this error

XMLHttpRequest: Network Error 0x80070005, Access is denied.

Google Chrome Console showed this error .

XMLHttpRequest cannot load http://si-cb01:10000/service1.asmx/GetJsonData. Here si-cb01 is nothing but system name with IP 192.168.*.***

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:xxx' is therefore not allowed access.
The response had HTTP status code 500.

I looked up the problem and it seems to be a Missing Cross-Origin Resource Sharing (CORS),but I cannot understand the solution for this.

jquery
json
ajax
web-services
asked on Stack Overflow Jul 5, 2016 by Lier • edited Jun 7, 2020 by sideshowbarker

2 Answers

▲
2
▼

To enable CORS on IIS add the following to the web.config file of your server application:

<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

Just for explanation, when you are calling some service which is hosted on different domain (other than your application), browser sends preflight request (request with http OPTION verb instead of POST or GET) and it waits for the answer. The answer, which comes from the server, means whether the server can respond to the client request or not, according to the CORS policy. You can use JSONP only if the service can responds with JSONP, in that case the response is wrapped something like this:

jsonp_callback(<YOUR JSON>)

where jsonp_callback is global function which is used to get the JSON and to send it to the ajax callback function.

To find more about how to enable CORS visit this site http://enable-cors.org/

answered on Stack Overflow Jul 6, 2016 by xxxmatko
▲
0
▼

This is because your ASMX service is not configured to serve requests from other domains for security reasons. All you need is to add this in web.config of your web service.

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Please note that this will allow all websites to access your webservice. If you want only a specific site to access your web service, change the custom header like this

<add name="Access-Control-Allow-Origin" value="http://example-site.com" />

This will give you a detailed idea on CORS: http://enable-cors.org/

P.S: Please refrain from using success and error callbacks while using $.ajax as they are deprecated.

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Update: Try setting these too.

In web.config

<location path="service1.asmx">
    <system.web>
        <webServices>
            <protocols>
                <clear />
                <add name="HttpGet" />
                <add name="HttpPost" />
            </protocols>
        </webServices>
    </system.web>
</location>

Decorate your method like this

[ScriptMethod(UseHttpPost = true)]
public string GetJsonData()
{
    return "Hello World";
}
answered on Stack Overflow Jul 6, 2016 by naveen • edited Jul 6, 2016 by naveen

User contributions licensed under CC BY-SA 3.0