小编典典

跨域资源共享(CORS)概念

ajax

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

有一个服务器(ex
amazon.com),在其中只有选定的域可以使用其Web服务。所以可以肯定,如果我尝试从本地使用他们的服务,我将无法。我在控制台上得到了这个

跨域请求被阻止:“同源起源”策略禁止读取http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0上的远程资源
。可以通过将资源移到同一域或启用CORS来解决此问题。

PS:我也使用jquery跨域方式,但是没有用。

但是,如果要使用Amazon的网络服务的某些域名拥有一个JavaScript,那么如果我们将其包含在html中,它就会起作用。

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

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

我的问题是:

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

阅读 260

收藏
2020-07-26

共1个答案

小编典典

前面的重要说明 :如果另一端的服务器未启用它,则您在 客户端 代码中将无法做任何允许跨域ajax请求的操作。

在回答您的问题之前,让我给您提供背景知识:

原产地安全策略

简而言之,同源安全策略可确保来自一个来源的脚本不会从其他来源获取内容。现在为您解释起源的概念,让我引用“相同来源安全策略 ”的Wikipedia文章的一部分:

下表概述了针对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(又名AJAX)的原因。


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

关于[跨源资源共享(CORS)](http://en.wikipedia.org/wiki/Cross-

origin_resource_sharing)的过分简化的描述。

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

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

并假设服务器中的某个页面向my-cool-site.com发送了请求third-party-site.com。通常,根据“
相同来源安全策略”,用户浏览器将拒绝对您自己的域/子域以外的任何其他站点的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中正常使用的调用。现在已经过时了,所有现代浏览器(包括Microsoft的浏览器)都可以处理CORS
XMLHttpRequest。但是,如果您需要支持过时的浏览器,此页面将对其进行描述:

要发出CORS请求,您只需XMLHttpRequest在Firefox 3.5 +,Safari 4+和Chrome
XDomainRequest中使用IE8
+中的对象即可。使用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服务。而且Amazon服务器将仅允许将其JavaScript文件下载到从选定域提供服务的页面。

要回答您的 编号 问题:

    • 如果文件来自同一来源,则将由浏览器下载。
    • 如果不是同一来源,则如果CORS请求成功,则将下载文件。
    • 否则,下载脚本将失败。
    • 如果下载成功,则JavaScript文件的内容将被加载到浏览器的内存中,并进行解释和执行。
  1. 请参阅CORS的说明以了解。
2020-07-26