Pass data to ASP.NET Web Service (ASMX) from Cross-Origin

In this blog, we are going to create “Hello World” ASP.Net Web Service (ASMX) with parameter and allow request from cross-origin.

Now here we implement ASP.Net Web Service from Visual Studio 2017. 

We have created empty ASP.Net Web Application solution and added “demo.asmx” in solution.

Then, added code for “HelloWorld” method with “name” parameter as mention below snippet:

1. [WebMethod]  
2.   
3. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  
4.   
5. public string HelloWorld(string text)  
6.   
7. {  
8.   
9. return "Hello World " + text;  
10.   
11. }  

We will invoke this web service using HTTP verb. So, we defined “ScriptMethodAttribute” for set response format JSON.

We need to enable script service to invoke & pass parameter in Web Service from script as shown in below screenshot:

Then set demo.asmx as startup page and run/test this web service on IIS:

Below is example of “Helloworld” webservice:

Now we will create another asp.net web application which will have index.html to request “Hello world” web service using JQuery:

1. $.ajax({  
2.   
3. type: "POST",  
4.   
5. url: "http://localhost:50555/Demo.asmx/HelloWorld",  
6.   
7. data: {'text':' Jayesh'},  
8.   
9. success: function(data) {  
10.   
11. console.log(data);  
12.   
13. },  
14.   
15. error: function(request, status, error) {  
16.   
17. console.log(request);  
18.   
19. }  
20.   
21. });  

We will receive this error message: “No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:11111' is therefore not allowed access.”

To solve above error we will need to add following code under configuration node in web.config:

1. <system.webServer>  
2.   
3. <httpProtocol>  
4.   
5. <customHeaders>  
6.   
7. <add name="Access-Control-Allow-Headers" value="accept, content-type" />  
8.   
9. <add name="Access-Control-Allow-Origin" value="http://localhost:11111"/>  
10.   
11. <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />  
12.   
13. </customHeaders>  
14.   
15. </httpProtocol>  
16.   
17. </system.webServer>  

Now when we request this web service, it will successfully return and response of web service as below in console:

Conclusion

We have learned about pass data to ASP.NET Web Service (ASMX) from Cross-Origin.

Thanks for reading article.