ajax - 将跨域 AJAX/XDomainRequest 发布到 Web 服务

Question

我花了很多时间阅读这里和其他各种网站上的所有各种帖子，并有以下代码:

    function post_cors(vars) {
        // cross domain AJAX posting - needs work to function in IE
        var successFunction = vars.success;
        var errorFunction = vars.error;
        var url = vars.url;
        var data = vars.data;

        if ($.browser.msie && window.XDomainRequest) {
            // CROSS DOMAIN AJAX FOR < IE10 (Doesn't work yet!)
            var xdr = new XDomainRequest();
            xdr.open("POST", url);
            xdr.send(JSON.stringify(data));
            xdr.onload = function () {
                // XDomainRequest doesn't provide responseXml, so if you need it:
                alert('Response: ' + xdr.responseText);
            };
        } else {
            $.ajax({ // proper AJAX for sensible browsers
                cache: false,
                dataType: "json",
                url: url,
                crossDomain: true,
                data: data,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data, textStatus, request) {
                    successFunction(data, textStatus, request);
                },
                error: function (data, textStatus, request) {
                    errorFunction(data, textStatus, request);
                }
            });
        };
    };

该函数的调用方式如下:

post_cors({
    'success': function (data) {
         doStuffWithResponse()
     },
     'url': SOME WEB SERVICE,
     'data': "{ 'para1': '" + para1 + "', 'para2': '" + para2+ "' }"
}); 

这会在 Chrome 和 Safari 等成熟的浏览器中发布标准的跨域 AJAX 帖子，并且可以完美运行，包括在 iPad 等上。但是，我无法在 IE < 10 中使用它。

相关代码是:

var xdr = new XDomainRequest();
xdr.open("POST", url);
xdr.send(JSON.stringify(data));

SO 和其他人的各种线程都表明这应该有效，包括这里:
How to send JSON data in XDR using the POST method

但它没有，我无法弄清楚为什么，尽管怀疑它与 POST 和数据有关。

所以我尝试了各种实验；

发布到没有参数的 Web 方法；

<WebMethod()> _
Public Function HelloWorld() As String
    Return "Hello World"
End Function

这在本地服务器上运行时似乎有效，但在添加到 Web 托管服务器时无效。我收到了 200成功代码，但似乎无法通过 IE 控制台或 Fiddler 实际看到响应。它似乎“离线”工作的事实无论如何可能是一个红鲱鱼......？

发布到采用参数的方法

<WebMethod()> _
Public Function TryThis(term as string) As String
    Return term
End Function

这总是返回 http 500 IE 出错，但在成熟的浏览器中完美运行。

我在 Fiddle 或 IE 控制台中都没有收到错误信息。

后者向我展示了它作为请求 header :

Key Value
Request POST http://samtest.thinkka.com/api/Sam_ScriptService.asmx/HelloWorld HTTP/1.1
Accept  */*
Origin  http://localhost:63238
Accept-Language en-GB
Accept-Encoding gzip, deflate
User-Agent  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host    samtest.thinkka.com
Content-Length  108
Proxy-Connection    Keep-Alive
Pragma  no-cache

和响应头:

Key Value
Response    HTTP/1.1 500 Internal Server Error
Cache-Control   private
Content-Type    text/html; charset=utf-8
Server  Microsoft-IIS/7.5
X-AspNet-Version    4.0.30319
X-Powered-By    ASP.NET
Access-Control-Allow-Origin *
Access-Control-Allow-Methods    GET, POST
Access-Control-Allow-Headers    Content-Type
Date    Tue, 08 Oct 2013 10:24:29 GMT
Content-Length  4826

Response Body为空，我无法读取任何错误消息，因此不知道发生此错误的位置或原因。

我怀疑问题出在 POST 还是表单数据上？

我曾尝试将数据作为对象而不是 JSON.Stringified 发布，但这不起作用，尽管我不希望它

所有 Fiddler 似乎都能告诉我 IE 控制台不是:

No Proxy-Authorization Header is present.
No Authorization Header is present.

两者都出现在“Auth”选项卡下，但在使用 Chrome 时也会出现在 Fiddler 中，它返回一个肯定的响应。

我注意到 Chrome 发布了两次数据，在我所有的阅读过程中，我知道这是正确的(虽然现在不记得为什么)，IE 没有，它只做第一篇文章。我认为这是正确的，因为它是 AJAX 的功能？

我的 Web.Config 文件添加了正确的标题:

<customHeaders>
     <add name="Access-Control-Allow-Origin" value="*" />
     <add name="Access-Control-Allow-Methods" value="GET, POST" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>

显然，我知道这里的跨域问题，并遵循了我能找到的所有示例，但我现在被卡住了……因此在这里发帖。

请不要告诉我不要使用 ASMX 网络服务，或者不允许跨域发布，我现在需要一个解决方案! :-)

上面发布的链接中原始问题的作者表明他通过在服务器端响应中发现错误解决了他的问题，但我的问题在除旧版本的 IE 之外的所有内容中都能完美运行(顺便说一下，它在 IE10 中有效)所以我看不出这是服务器端错误 - 如果是，则无法获取有关 Error 500 的信息使其无法识别。

Answer 1

首先，您需要修复代码，使其不会尝试在 IE10 中使用 XDomainRequest，IE10 支持 CORS-for-XmlHttpRequest 和旧版 XDomainRequest 对象。

接下来，您需要更新服务器端代码，以便在请求缺少 Content-Type: application/json 时不会返回 HTTP/500 响应。标题。 XDomainRequest doesn't allow您设置该 header ，并且您的服务器在决定如何解析请求正文时似乎期待它。