【问题标题】：Calling simple asmx webservice method on HTML page在 HTML 页面上调用简单的 asmx webservice 方法
【发布时间】：2017-11-28 08:09:48
【问题描述】：

我想请你帮忙解决我在 HTML 页面上调用 ASP.NET webservice 方法的问题。该代码非常简单，但通常无法正常工作。一般来说，因为我找到了一个浏览器 - IE 11，所以它运行良好。在所有其他浏览器上，Web 服务响应为空（XMLHttpRequest 对象的状态属性返回 0 而不是 200）。有趣的是，如果我直接将方法地址 (http://www.rpdp.hostingasp.pl/RPDPWebService.asmx/HelloWorld) 放到任何浏览器的 URL 栏中，结果都是正确的：Hello World。结论 - webservice 运行良好，但我无法在 JS 代码中正确调用它的方法。我已经阅读了有关此问题的多个讨论，并认为该问题与安全问题和跨组织资源共享有关。考虑到这一切，我尝试了很多技巧，但都没有成功。我对这件事很陌生，如果有人能告诉我要在下面的代码中更改什么以使其在每个浏览器上都能正常工作，我将不胜感激。

亲切的问候，

皮奥特雷克

附：我在外部托管 ASP.NET 网络服务器上发布我的网络服务，因此我无法更改它的（服务器）设置。

ASP.NET 网络服务：

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";
        }
    }
}

在 web.config.xml 文件中，我添加了以下标签（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 页面，我在该页面上调用我的 webservice 方法：

<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>

【问题讨论】：

标签： javascript asp.net json ajax asmx

【解决方案1】：

查看以下博文：https://zqzhang.github.io/blog/2016/04/18/why-use-onload-in-cross-domain-ajax.html

它建议在执行跨域 Ajax 请求时使用 onload 替换 onreadystatechange。

问题是`Access-Control-Allow-Origin` 被定义了两次。

【讨论】：

感谢 Örvar 的回答。不幸的是结果是一样的 - 在 IE 11 中可以，在其他浏览器中为空 :(.function go() { var req = new XMLHttpRequest(); req.open("GET", "rpdp.hostingasp.pl/RPDPWebService.asmx/HelloWorld", true); req. onload = function(){ var returnData = req.responseText; alert('成功！返回数据：' + returnData); req = null; } req.send(null); }
在 chrome 开发者工具控制台中可以看到哪些错误？
您是否多次设置Access-Control-Allow-Origin？您可以尝试从您的 webconfig 中删除 <add name="Access-Control-Allow-Origin" value="*" />。
我不使用它，但是当我运行 Fiddler 时，我看到了正确的结果（！）：GET rpdp.hostingasp.pl/RPDPWebService.asmx/HelloWorld HTTP/1.1 主机：www.rpdp.hostingasp.pl ... HTTP/ 1.1 200 OK ... tempuri.org/">Hello World 所以网络服务返回数据给浏览器，但浏览器无法显示。或者 - 也许 - 我必须在路径中运行 localhost 和 index.html 文件？
宾果游戏！非常非常感谢欧瓦尔！原因是两次设置 Access-Control-Allow-Origin。我将它从 web.config 中排除，结果在 Chrome 和 FireFox 上还可以！再次非常感谢您！

问题是Access-Control-Allow-Origin 被定义了两次。

问题是`Access-Control-Allow-Origin` 被定义了两次。