【问题标题】：Usages of jQuery's ajax crossDomain property?jQuery 的 ajax crossDomain 属性的用法？
【发布时间】：2014-02-10 20:58:17
【问题描述】：

根据jQuery：

crossDomain (default: false for same-domain requests, true for cross-domain requests) 类型：布尔如果你想强制同域跨域请求（如JSONP），设置值跨域为真。例如，这允许服务器端重定向到另一个域。（添加的版本：1.5）

我不明白上面的意思。

如果代码是

$(document).ready(function ()
{
    $.ajax(
    {
        url: 'http://es3.com/Handlers/MyHandler.ashx',
        cache: false,
        dataType: "jsonp",
        ...
        ...
    });
});

function aaa(json)
{
    alert(json.result);
}

我指定datatype:jsonp，然后响应将是应用程序/javascript mime 类型，因为它是一个将在我的浏览器中运行的脚本。

当我在 same 域下运行此代码时，我看不出有任何理由为什么它不会那样运行。（因此 - 我没有看到此属性的用途）。

我已经做了一个示例

我有 2 个（主机调整）域。 es2.com 和 es3.com。

（注意，代码中的url总是指向es3.com）

测试#1：

从es3.com 运行代码：（左窗格）
从es2.com 运行代码：（右窗格）
crossDomain:false（缺少时默认）。

看看差异：(http://i.stack.imgur.com/RKyZp.jpg)

测试#2：

从es3.com 运行代码：（左窗格）
从es2.com 运行代码：（右窗格）
crossDomain:true

(http://i.stack.imgur.com/xEcyd.jpg)

我看不出有什么不同。

问题：

为什么/何时我需要设置crossDomain 属性？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

假设您有另一个域spanish.es2.com 为您网站的西班牙用户提供服务。

您有以下要求：

在es2.com上有一个网页
在es2.com 上调用一个api 并传递一些用户信息（或cookie），并获取一些用户数据。但是如果用户是西班牙语，spanish.es2.com 上的 api 需要为相同的数据调用。
当您使用 jQuery 从 es2.com 向 es2.com 发出 ajax 请求时，对于西班牙用户：

(a) 禁用 crossdomain ：您的 es2.com api 会发现用户是西班牙人，因此执行 http 重定向到 spanish.es2.com ，由于 ajax 相同的域策略，这将不起作用，并且 ajax 会失败。在 ajax url 中重定向 -> 不允许。

(b) 启用crossdomain ：您的 es2.com api 的 jsonp 响应实际上是作为包装在函数中的脚本标签加载的，因此 http 重定向到其他域无关紧要，内容仍然加载，因此ajax有效。在脚本标签的 src 中重定向 -> 允许。

希望这说明清楚。

【讨论】：

我不明白你的意思是“重定向”。
@RoyiNamir 例如 302 或 301 重定向。例如。 http://es2.com/api?user=a&lang=spanish&method=three 执行 302 重定向到 http://spanish.es2.com/api?user=a&method=tres
响应类型为脚本，不受跨域限制。

【解决方案2】：

丢失时不是默认的 false。如果域不同（如上面的第一个示例），则缺少它时默认为 true。我认为在几乎所有情况下，您都可以将其保留为默认值。

另外，在设置跨域参数时，JQuery 默认尝试使用 CORS，而不是 JSONP。

以下是来自 JQuery 源的一些相关 sn-ps：https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js

变量“xhrSupported”...

xhrSupported = jQuery.ajaxSettings.xhr();

..用于检查 CORS 支持....

support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );

.. 进行 AJAX 调用时检查....

jQuery.ajaxTransport(function( options ) {
        var callback;

        // Cross domain only allowed if supported through XMLHttpRequest
        if ( support.cors || xhrSupported && !options.crossDomain )

希望这会有所帮助！

【讨论】：

什么意思另外，在设置跨域参数时，JQuery默认会尝试使用CORS，？ ---- 服务器也应该支持 CORS（添加特殊的标头）！如果 jquery 不知道服务器是否支持 CORS，它怎么会尝试做 CORS？客户只知道他应该得到专门定制的脚本来执行（实际上是 jsonp）。
抱歉 - 这不是很清楚。是的，它检查标头中的 CORS 支持。我的意思是，没有明确设置为 jsonp 或使用类似回调=？在 url - 然后它将使用 CORS 而不是 JSONP
对不起，我还是不明白你的回答。您能否提供此属性用法的示例：如果存在与不存在...这将使我最终理解。我的问题的根源是纯ajax的jsonp响应不受跨域问题的影响，所以我不明白问题出在哪里。请用不同的样品详细说明。非常感谢你

【解决方案3】：

如果您已经指定了 JSONP，那么 crossDomain 参数不会做太多事情。它只是告诉 jQuery 请求 JSONP，即使它是本地域。

假设您正在使用返回 JSON 或 JSONP 的本地服务在您的机器上工作。您可以使用普通的$.ajax() 调用，它工作正常。但是，在生产中，如果您满足某些特殊条件，服务器会将您的请求重定向到不同的域。 Prod 需要请求 JSONP，因为有时响应来自域外。

在没有crossDomain: true 或datatype: 'jsonp' 的情况下进行$.ajax() 调用将假定响应可以是纯JSON，因此代码将在生产中失败。

您还可以通过loading cross-domain XML through JSONP with YQL 之类的prestidigitation 获取跨域XML，这实际上只是将其包装在JSONP 中。

【讨论】：

但是从服务器 POV 来看，这是一个不同的实现！假设我要的是 json 结果。服务器知道只返回 json。因此，我向服务器发出 ajax 请求，服务器又将我定向到 domainB。现在你说在 domainB 上必须有一个 JSONP 处理程序来制作 callback({}) 的东西。你是这么说的吗？为了使它起作用，我作为开发人员必须同时创建 json 响应和（！！）jsonp 响应？
服务器端和客户端是不同的both，尽管jQuery 很好地抽象了它。 JSONP 将脚本标签添加到页面并让您执行命名函数。您可以 A）get around CORS 使 JSON 请求跨域，B）指定 JSONP，使其在本地和跨域相同，或 C）在本地和 JSONP 跨域使用 JSON。指定 crossDomain: true 或 dataType: 'jsonp' 应该具有相同的效果：始终使用 JSONP。

【解决方案4】：

据我所知，操作是正确的。将 dataType 设置为 jsonp 将创建一个 JSONP 类型的请求；将结果写入脚本块并运行。因此通过将 cross-domain 设置为 true 来强制 JSONP 似乎是多余的。

但是。该文档说“如果您想强制执行跨域请求，例如 JSONP”，因此暗示可能存在其他情况，您可能希望强制执行跨域行为。但是我不确定这些情况可能是什么。

【讨论】：

【解决方案5】：

你的问题对我理解在 jQuery 中使用 jsonp 时遇到的问题非常有帮助。
就我而言，我需要对外部域进行 JSONP 调用。
但是需要从我们的域构造 URL。

例如，在这里，我假设我的网站在 es2.com

es2.com
es2.com 上的 JSONP 调用重定向到 es3.com?newConstructedUrl=someRandomValue
es3.com?newConstructedUrl=NewCoolValue 重定向到 es2.com
es2.com 在响应中设置新的 cookie
p>

代码在 localhost 中运行良好，但我们在 es2 环境中没有 cookie。
看到调试器，请求是在 es2 环境中的 XHR 中完成的
然后我们需要将 crossDomain 参数设置为 true。然后，即使在 es2.com

中也完成了 JSONP 请求

希望我的用例很清楚！

【讨论】：

【解决方案6】：

default for crossDomain如下：

同域请求为假，跨域请求为真

data-type 的解释因crossDomain 设置的值而异：

“json”：将响应评估为 JSON 并返回 JavaScript 目的。跨域“json”请求被转换为“jsonp”，除非请求在其请求选项中包含 jsonp: false

因为您使用的是jsonp 而不是json，所以您不会在测试中看到任何差异。

什么时候需要设置 crossDomain 属性？

如果您发出相同的域 json 请求，并且您的站点可能会将请求重定向到另一个域以提供响应（通过 HTTP 3XX），那么您应该设置 crossDomain属性为 true，以便调用脚本可以读取响应。

这为您提供了在发出同源请求时检索 JSON 的优势，以及在发出跨源请求时 JSONP 的功能。如果 CORS 在您重定向到的域上处于活动状态，那么您可以在请求选项中设置 jsonp: false。

示例

从 example.com 向 example.org 发出请求。

crossDomain 自动设置为 true。
数据类型设置为jsonp。

结果： example.org 返回的 JSONP。

从 example.com 向 example.com 发出请求。

crossDomain 自动设置为 false。
数据类型设置为jsonp。

结果： example.com 返回的 JSONP。

从 example.com 向 example.org 发出请求。

crossDomain 自动设置为 true。
数据类型设置为json。

结果： example.org 返回的 JSONP。

从 example.com 向 example.com 发出请求。

crossDomain 自动设置为 false。
数据类型设置为json。

结果： example.com 返回的 JSON。

从 example.com 向 example.org 发出请求。

crossDomain 自动设置为 true。
数据类型设置为json。
jsonp 设置为 false。
example.org 不支持 example.com 的 CORS

结果：浏览器返回CORS错误。

从 example.com 向 example.com 发出请求，example.com 将 AJAX 重定向到 example.edu。

crossDomain 手动设置为 true。
数据类型设置为json。

结果： example.edu 返回的 JSONP。

从 example.com 向 example.org 发出请求。

crossDomain 自动设置为 true。
数据类型设置为json。
jsonp 设置为 false。
example.org 确实支持针对 example.com 的 CORS

结果： example.org 返回的 JSON。

从 example.com 向 example.com 发出请求，example.com 将 AJAX 重定向到 example.edu。

crossDomain 自动设置为 false。
数据类型设置为json。
example.edu 不支持 example.com 的 CORS

结果：浏览器返回CORS错误。

【讨论】：