javascript - 跨源资源共享 (CORS) 概念

Question

我对跨域 JavaScript 的概念有疑问。

有一个服务器(ex amazon.com)，只有选定的域可以使用他们的网络服务。 所以肯定的是，如果我尝试使用他们的服务，从我的本地，我不能。 我在我的控制台上得到了这个

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0. This can be fixed by moving the resource to the same domain or enabling CORS.

PS:我也用jquery跨域的方式，但是没用。

但是，如果所选域中的某个域使用 Amazon 的网络服务，则有一个 JavaScript，如果我们将其包含在我们的 html 中，它就可以工作。

<script src="http://example.com"></script>

他们有一种通过 Ajax 获得响应的方法。

我的问题是:

1. 当我们从 Internet URL 引用 JavaScript 文件时会发生什么。我们的机器上有运行本地副本吗？
2. 是否创建了 httpRequest，请求源将作为我的域或 xyz。

Answer 1

预先重要说明:如果另一端的服务器未启用它，则您无法在客户端代码中执行任何操作来允许跨源 ajax 请求。

在回答您的问题之前，让我给您介绍一下背景:

Same-Origin Security Policy

简单地说，同源安全策略确保来自一个源的脚本不能从其他源获取内容。现在向您解释起源的概念，让我引用部分Wikipedia article of Same-Origin Security Policy :

The following table gives an overview of typical outcomes for checks against the URL "http://www.example.com/dir/page.html".

Compared URL                                             Outcome  Reason
-------------------------------------------------------  -------  ----------------------
http://www.example.com/dir/page2.html                    Success  Same protocol and host
http://www.example.com/dir2/other.html                   Success  Same protocol and host
http://username:password@www.example.com/dir2/other.html Success  Same protocol and host
http://www.example.com:81/dir/other.html                 Failure  Same protocol and host but different port
https://www.example.com/dir/other.html                   Failure  Different protocol
http://en.example.com/dir/other.html                     Failure  Different host
http://example.com/dir/other.html                        Failure  Different host (exact match required)
http://v2.www.example.com/dir/other.html                 Failure  Different host (exact match required)
http://www.example.com:80/dir/other.html                 Depends  Port explicit. Depends on implementation in browser.

Unlike other browsers, Internet Explorer does not include the port in the calculation of the origin, using the Security Zone in its place.

因此，例如，您的 JavaScript 无法从除其来源服务器之外的 Web 服务器下载任何内容(也就是向其发出 HTTP 请求)。这正是您不能向其他域发出 XmlHttpRequests(又名 AJAX)的原因。

---

CORS 是另一端的服务器(不是浏览器中的客户端代码)可以relax the same-origin policy 的一种方式.

关于Cross Origin Resource Sharing (CORS)的过于简单的描述.

The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains. Browsers support these headers and respect the restrictions they establish.

示例:假设您的站点是 http://my-cool-site.com 并且您在域 http:/有一个第三方 API/third-party-site.com，您可以通过 AJAX 访问。

让我们假设来自您的服务器 my-cool-site.com 的页面向 third-party-site.com 发出了请求。通常，用户浏览器会根据 Same-Origin Security Policy 拒绝对您自己的域/子域以外的任何其他站点的 AJAX 调用。 .但是如果浏览器和第三方服务器支持CORS，会出现以下情况:

• 浏览器会将 Origin HTTP header 发送到 third-party-site.com

  Origin: http://my-cool-site.com
  

• 如果第三方服务器接受来自您域的请求，它将以 Access-Control-Allow-Origin HTTP header 响应:

  Access-Control-Allow-Origin: http://my-cool-site.com
  

• 要允许所有域，第三方服务器可以发送此 header :

  Access-Control-Allow-Origin: *
  

• 如果不允许您的站点，浏览器将抛出错误。

如果客户有相当现代的browsers that support CORS ，以及您的第三方服务器 supports CORS同样，CORS 对您也很有用。

在一些过时的浏览器(例如 IE8)中，您必须使用 Microsoft 特定的 XDomainRequest 对象而不是 XMLHttpRequest 来进行调用，以便正确地与CORS;现在这已经过时了，所有现代浏览器(包括来自 Microsoft 的浏览器)都在 XMLHttpRequest 中处理 CORS。但是如果你需要支持过时的浏览器，this page描述它:

To make a CORS request you simply use XMLHttpRequest in Firefox 3.5+, Safari 4+ and Chrome and XDomainRequest object in IE8+. When using XMLHttpRequest object, if the browser sees that you are trying to make a cross-domain request it will seamlessly trigger CORS behaviour.

Here is a javascript function that helps you create a cross browser CORS object.

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        // XHR has 'withCredentials' property only if it supports CORS
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){ // if IE use XDR
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

同样，只有过时的浏览器才需要这样做。

---

上述原因是您无法从您的脚本中使用亚马逊的网络服务的原因。亚马逊服务器将只允许将他们的 JavaScript 文件下载到从选定域提供的页面。

回答您的编号问题:

1. • 同源文件会被浏览器下载。
   • 如果不是同源，则在 CORS 请求成功时将下载该文件。
   • 否则，下载脚本将失败。
   • 如果下载成功，JavaScript 文件的内容将被加载到浏览器的内存中，并被解释和执行。

2. 查看 CORS 上的说明以了解。