使用 jquery 和 jsonp 的 ASP.NET 跨域 Web 服务调用错误答案

【问题标题】：ASP.NET cross domain web service call error using jquery and jsonp使用 jquery 和 jsonp 的 ASP.NET 跨域 Web 服务调用错误
【发布时间】：2013-05-10 14:19:47
【问题描述】：

我的问题与here 描述的问题非常相似。

但是，在我的情况下，我在 firebug 中收到 500 Internal Server Error：

请求格式无法识别，因为 URL 意外以“/HelloWorld”结尾。

我的 asp.net 4.0 Web 服务调用是跨域的，并且根据十几个其他网站的建议，我相信我已经配置了所有内容以使这种情况正确发生，但显然我没有。我究竟做错了什么？

我使用 JSONP 而不是 JSON。如果一切都在同一台服务器上，则 Web 服务将按预期工作。我的问题是调用 Web 服务的 html 页面的托管服务提供商不允许服务器端代码，否则我只需将所有内容放在一个地方并完成它！

下面是我的代码/标记：

web.config：

<?xml version="1.0"?>
    <configuration>
  <system.webServer>
    <httpErrors errorMode="Detailed"></httpErrors>
    <asp scriptErrorSentToBrowser="true"></asp>
    <modules>
      <add name="ContentTypeHttpModule"
                    type="ContentTypeHttpModule.ContentTypeHttpModule, ContentTypeHttpModule" />
    </modules>
  </system.webServer>
  <system.web>
    <customErrors mode="Off"></customErrors>
    <compilation debug="true" targetFramework="4.0"/>
    <trust level="Full"/>
    <pages clientIDMode="Static"/>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
    <!--<httpModules>
      <add name="ContentTypeHttpModule"
                    type="ContentTypeHttpModule.ContentTypeHttpModule, ContentTypeHttpModule" />
    </httpModules>-->
  </system.web>
</configuration>

html 文件 javascript:

function test() {
            $.ajax({
                url: 'http://designonlinelettering.com/RenderImage.asmx/HelloWorld',
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                success: function (result) {
                    var data = result.d;
                    alert(data);
                },
                error: function (e) {
                    alert('error: ' + e.d);
                }
            });
        }

网络服务代码：

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string HelloWorld()
{
return "Hello World";
}

ContentTypeHttpModule 代码取自这个信息量很大的blog，我从中得到了大部分的指导。

感谢您的帮助...

【问题讨论】：

jsonp 请求不需要 $.ajax 的 contentType 和错误选项，仅供参考
您得到的错误是服务器端的，与 jQuery 无关。直接导航到http://designonlinelettering.com/RenderImage.asmx/HelloWorld，你就会看到。

标签： javascript jquery asp.net web-services jsonp

【解决方案1】：

如前所述，如果您在浏览器中查看http://designonlinelettering.com/RenderImage.asmx/HelloWorld，您将看到错误。添加 ?callback=x 没有帮助。它只会为正确设置数据/响应类型的 POST 请求返回 JSON。

ASMX 有问题，不会为 GET 请求返回 JSON...最好的办法是使用 ASHX，然后 Response.Render JSON（我建议使用 JSON.Net 作为编码器）。

...
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using Newtonsoft.Json.Linq;
...
  var ret = JsonConvert.SerializeObject(
    objectToReturn
    ,new IsoDateTimeConverter()
    ,new DataTableConverter()
    ,new DataSetConverter()
  );
  //only need the datatable, and dataset converters if you're returning those types

  //jsonp should have a callback on the querystring, in your jquery
  // request append  "pathto.ashx?callback=?"
  context.Response.ContentType = "application/javascript";
  context.Response.Write(string.format(
    "{0}({1});"
    ,context.Request.QueryString["callback"]
    ,ret
  ));
...

【讨论】：