跨域资源共享(CORS)概念

Question

我对跨域JavaScript这个概念有疑问.

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

跨源请求已阻止:同源策略不允许在http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0上读取远程资源 .这可以通过将资源移动到同一域或启用CORS来解决.

PS:我也使用了jquery跨域方式,但没有用.

但是,如果使用亚马逊的web服务,那些选定的域之一的域名有一个JavaScript,如果我们在html中包含它,它就可以工作.

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

他们有一种方法来获得Ajax的响应.

我的问题是:

1. 当我们从互联网网址引用JavaScript文件时会发生什么.我们的机器上是否有本地副本？
2. 是否创建了httpRequest,将请求源作为我的域或xyz.

Answer 1

重要提示:如果另一端的服务器没有启用它,那么在客户端代码中你无法做任何事情来允许跨源的ajax请求.

在回答你的问题之前,我先给你一个背景:

同源安全政策

简而言之,同源安全策略可确保来自一个源的脚本可能无法从其他来源获取内容.现在向您解释原始概念,让我引用维基百科同源安全策略文章的一部分:

下表概述了针对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.

与其他浏览器不同,Internet Explorer在原点计算中不包括端口,使用安全区域.

因此,例如,您的JavaScript无法从源自其服务器的Web服务器(也称为发出HTTP请求)下载任何内容.这正是您无法向其他域创建XmlHttpRequests(aka AJAX)的原因.

CORS是另一端的服务器(不是浏览器中的客户端代码)可以放松同源策略的一种方式.

关于跨源资源共享(CORS)的过度简化描述.

CORS标准通过添加新的HTTP标头来工作,这些标头允许服务器将资源提供给允许的源域.浏览器支持这些标头并尊重它们建立的限制.

示例:假设您的网站是,http://my-cool-site.com并且您在域中有第三方API http://third-party-site.com,您可以通过AJAX访问该API .

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

• 浏览器将发送和OriginHTTP标头third-party-site.com

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

• 如果第三方服务器接受来自您域的请求,它将使用Access-Control-Allow-OriginHTTP标头进行响应:

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

• 要允许所有域,第三方服务器可以发送此标头:

  Access-Control-Allow-Origin: *
  

• 如果您的站点不被允许,浏览器将抛出错误.

如果客户端具有支持CORS的相当现代的浏览器,并且您的第三方服务器也支持CORS,则CORS对您很有用.

在一些过时的浏览器(例如IE8)中,您必须使用特定于Microsoft的XDomainRequest对象而不是进行XMLHttpRequest可与CORS一起正常工作的调用; 现在已经过时了,所有现代浏览器(包括来自微软)都会处理CORS XMLHttpRequest.但是,如果您需要支持过时的浏览器,此页面将对其进行描述:

要制作CORS请求,您只需使用XMLHttpRequestFirefox 3.5 +,Safari 4+和Chrome以及XDomainRequestIE8 +中的对象即可.使用XMLHttpRequest对象时,如果浏览器发现您正在尝试发出跨域请求,它将无缝触发CORS行为.

这是一个javascript函数,可以帮助您创建跨浏览器CORS对象.

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;
}

同样,这只是过时的浏览器所必需的.

上述原因导致您无法使用脚本中的Amazon Web服务.亚马逊服务器只允许将其JavaScript文件下载到从选定域提供的页面.

要回答您编号的问题:

1. • 如果文件位于同一源,则浏览器将下载该文件.
   • 如果它不在同一个源中,则在CORS请求成功时将下载该文件.
   • 否则,下载脚本将失败.
   • 如果下载成功,则JavaScript文件的内容将加载到浏览器的内存中,解释并执行.

2. 请参阅有关CORS的说明以了解.