Calling simple asmx webservice method on HTML page

I would like to ask you for help to solve my problem with calling ASP.NET webservice method on HTML page. The code is extremally simple, but is generally not working. Generally, because I found one browser - IE 11, on witch it works fine. On every other browser the webservice reponse is empty (status property of XMLHttpRequest object returns 0 instead of 200). It is interesting that if I put directly the method address (http://www.rpdp.hostingasp.pl/RPDPWebService.asmx/HelloWorld) to the URL bar of any browser the result is correct: <string xmlns="http://tempuri.org/">Hello World</string>. Conclusion - webservice works good, but I cannot call it's methods correctly in JS code. I've read multiple discussions on this matter and suppose that the problem is related to the security issues and cross-orgin resource sharing. All this concidered, I have tried many tips, but with no success. I am very new to this matter and would be very grateful if anyone could tell what am I to change in the code below to make it work on every browser.

Kind regards,

Piotrek

P.S. I publish my webservice on external hosting ASP.NET webserver so I cannot change it's (server) settings.

ASP.NET webservice:

namespace RPDP
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class RPDPWebService : System.Web.Services.WebService
    {
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
}

In web.config.xml file I have added following tags (first in , second - in ):

<webServices>
    <protocols>
        <add name="HttpSoap"/>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
    </protocols>
</webServices>

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Headers" value="accept, content-type" />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
    </customHeaders>
</httpProtocol>

HTML page, on which I call my webservice method:

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script>
    function go()
    {   
        var req = new XMLHttpRequest();
        req.open("GET", "http://www.rpdp.hostingasp.pl/RPDPWebService.asmx/HelloWorld", true);

        req.onreadystatechange = function(){
            if ( req.readyState == 4) {
                if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
                    var returnData = req.responseText;
                    alert('Success! Returned data: ' + returnData);
                } else {
                    alert("Error; request.status = " + req.status);
                }
                req = null;
            };
        }

        req.send();
    }
</script>
</head>
<body onload="go();"></body>
</html>

Solution

Have a look at the following blogpost: https://zqzhang.github.io/blog/2016/04/18/why-use-onload-in-cross-domain-ajax.html

It suggests the usage of the onload insted of the onreadystatechange when performing a cross-domain Ajax request.

The issue was that `Access-Control-Allow-Origin` had been defined twice.

Calling simple asmx webservice method on HTML page

The issue was that Access-Control-Allow-Origin had been defined twice.

The issue was that `Access-Control-Allow-Origin` had been defined twice.