有人可以帮我理解跨域异步 JS 请求的东西以及如何调试它吗？

Posted 2023-02-27

【中文标题】有人可以帮我理解跨域异步 JS 请求的东西以及如何调试它吗？

【英文标题】：Can somebody help me understand crossdomain asynchronous JS requests stuff and how to debug it?

【发布时间】：2016-01-02 09:58:16

【问题描述】：

我正在尝试通过 jQuery 的 ajax 发出跨域异步 GET 请求，但在理解正在发生的事情和网络浏览器错误消息时遇到了很多麻烦。

首先，这里是 CoffeeScript 代码：

$(document).on('submit', '.myform', (e) ->
    try
        foo = 'val'                
        settings =
            data:  foo: foo 
            type: 'GET'
            dataType: 'json'
            success: (data, textStatus, jqXHR) ->
                console.log data if debug?
                console.log textStatus if debug?
            error: (jqXHR, textStatus, errorThrown) ->
                console.warn textStatus if debug?
                console.warn errorThrown if debug?

        $.ajax('http://anotherserver.tld/api', settings)
    catch error
        console.error error
    finally
        return false
)

我知道json 只有在提供 javascript 的主机上设置跨域文件时才是有效的数据类型。这是我使用的（我们称服务器为my_server.tld）：

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <!-- Read this: https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

    <!-- Most restrictive policy: -->
    <!-- <site-control permitted-cross-domain-policies="none"/> -->

    <!-- Least restrictive policy: -->
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*" to-ports="*" secure="false"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

（来自 HTML5 样板）

当我尝试此代码时，我收到以下错误：

[Error] XMLHttpRequest cannot load http://anotherserver.tld/api?foo=val. Origin http://my_server.tld is not allowed by Access-Control-Allow-Origin.

这让我很困惑。 my_server 或 anotherserver 上是否缺少某些东西或配置错误？ crossdomain.xml 文件是否与此类问题相关？

因为，即使我无法访问anotherserver.tld，我也尝试了使用my_other_server 的代码，我完全可以在my_other_server 访问日志中看到该请求。

感谢您的帮助。

（作为记录，我也尝试切换到jsonp，但随后我收到一个解析错误，看起来像完美的 JSON 数据...有些头发掉了）

更新：这是来自anotherserver.tld 的crossdomain.xml 文件：

<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

【问题讨论】：

***.com/questions/10636611/…

您将请求发送到的 服务器 需要支持 CORS (Access-Control-Allow-Origin) 或 JSONP（不是 JSON）。为了使 CORS 工作，您的服务器需要设置 Access-Control-Allow-Origin 标头。对于 JSONP，您的服务器需要输出一个 JavaScript 文件。 JSONP 的格式如下：callback(your:data).

谷歌那个错误...甚至有一个专门的网站

@charlietfl 不要以为我没有谷歌搜索错误。 :)

是的，anotherserver.tld 必须提供一个Access-Control-Allow-Origin: my_server（或*）响应标头，以允许从my_server 运行的脚本访问anotherserver.tld 资源。对于crossdomain.xml，请参阅What is crossdomain.xml file?——它被Flash 等Adobe 产品使用。浏览器不使用它。

【参考方案1】：

您的 jquery 代码很好。如果允许跨域请求，您将需要与 ajax-server 的所有者核实。

除非配置为跨域服务器，否则不可能向跨域服务器发出 ajax 请求。

在此处了解更多信息：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

---

具体来说，anotherserver.tld 应在其响应中包含 Access-Control-Allow-Origin: my_server（或 *）标头。