跨域 AJAX 调用？答案

【问题标题】：Cross Domain AJAX Call?跨域 AJAX 调用？
【发布时间】：2013-09-30 21:00:59
【问题描述】：

$.ajax({

      url: 'https://XXXXX.desktop.XXXX.com:9011/iws-merchant/XXXXX.htm',
      dataType: "jsonp",
      success: function (response) {
       str=response;

      },
      error: function( response ) {
          alert( "ERROR:  " + JSON.stringify );
       }
   });

它总是在错误块中。我正在对不同的 PORT（相同域）进行 AJAX 调用。

但是当我尝试在新标签中点击相同的 URL 时。我可以看到响应。

任何帮助都将受到高度赞赏。

【问题讨论】：

domain、protocol 和 port 必须匹配。否则该请求将受到 SOP 限制。
服务器是否设置正确以返回 JSONP 响应？在您的示例中，由于您没有指定回调参数，因此发送到服务器的 GET 参数将被称为“回调”。
所以我们可以使用 JSONP ryt 吗？
BTW 在你的错误块中 JSON.stringify 本身不会做任何事情......我认为这只是一个错字
dataType:"jsonp" 对我有用吗？当响应成功时，它将来到成功处理程序。

标签： javascript cross-domain jsonp

【解决方案1】：

您可以按照 Gaurav Agrawal 的建议使用 JSONP，或者您可以为接收 ajax 请求的站点启用 Access-Control-Allow-Origin。

Ajax 的工作方式如下：相同的域但不同的端口 = 不同的域

如果您在 ajax 目标服务器上使用 asp.net，您可以在 web.config 中添加访问控制：

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
<system.webServer>

帮自己一个忙，将“*”替换为您的网站网址！

在某些情况下，您甚至可能需要这些键，只需在添加之前搜索每个功能！

<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Expose-Headers" value="*"/>

【讨论】：

【解决方案2】：

您不能使用 JSON 进行跨域 AJAX 调用。您需要使用 JSONP。因此，与其从控制器操作返回常规 JsonResult，不如编写一个自定义操作结果，将 JSON 包装在作为参数传递的回调中：

public class JsonpResult : ActionResult
{
    private readonly object _obj;

    public JsonpResult(object obj)
    {
        _obj = obj;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        var serializer = new JavaScriptSerializer();
        var callbackname = context.HttpContext.Request["callback"];
        var jsonp = string.Format("{0}({1})", callbackname, serializer.Serialize(_obj));
        var response = context.HttpContext.Response;
        response.ContentType = "application/json";
        response.Write(jsonp);
    }
}

然后让您的控制器操作返回此自定义操作结果：

public ActionResult SomeAction()
{
    var result = new[]
    {
        new { Id = 1, Name = "item 1" },
        new { Id = 2, Name = "item 2" },
        new { Id = 3, Name = "item 3" },
    };
    return new JsonpResult(balances);
}

现在您可以跨域使用此操作：

var url = "http://example.com/SomeController/SomeAction/";
$.getJSON(url + '?callback=?', function (data) {
    alert(data);
});

【讨论】：