跨源资源共享(CORS)概念

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

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

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

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

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

 

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

我的问题是:

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

重要提示 :如果另一端的服务器没有启用它,那么在客户端代码中你无法做任何事情来允许跨源的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并且您在域http://third-party-site.com有第三方API,您可以通过AJAX访问该域。

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

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

     Origin: http://my-cool-site.com 
  • 如果第三方服务器接受来自您的域的请求,它将使用Access-Control-Allow-Origin HTTP标头进行响应:

     Access-Control-Allow-Origin: http://my-cool-site.com 
  • 要允许所有域,第三方服务器可以发送此标头:

     Access-Control-Allow-Origin: * 
  • 如果您的站点不被允许,浏览器将抛出错误。

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

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

要发出CORS请求,您只需在XDomainRequest +中的Firefox 3.5 +,Safari 4+以及Chrome和XDomainRequest对象中使用XMLHttpRequest 。 使用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文件下载到选定域提供的页面。

要回答您编号的问题:

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

CORS是必须在服务器上修改的设置。 它允许外部域请求网页上的资源。 简单地在客户端上更改代码不会改变CORS的function。

您可以从“脚本”标记内访问页面的原因是,标记的处理方式与跨源请求的所有其他数据的处理方式不同。 在过去,您可以使用JSONP将CORS“破解”到您的系统上,JSONP将JSON数据存储在HTML标记内。

要在Apache中启用CORS:

首先通过输入找到你的httpd.conf

 ps -ef | grep apache 

这将为您提供Apache的位置。 找到该类型后:

   -V 

这将返回你的httpd.conf的确切位置,如:

  -D SERVER_CONFIG_FILE="/etc/apache2/apache2.conf" 

现在你需要转到httpd.conf并输入“/”来搜索 。 一旦找到标签,就在它输入后:

 Header set Access-Control-Allow-Origin "*" 

运行以下命令保存文件并确认语法正确:

 apachectl -t 

如果检出,请运行graceful restart命令:

 apachectl -k graceful 

服务器重新启动后,现在可以通过外部脚本访问您的文件。

如果由于错误而无法保存配置,请尝试退出编辑器并键入:

 sudo chmod 755 httpd.conf 

这使得所有者可以完全访问配置文件,但其他人只能读取执行它( http://en.wikipedia.org/wiki/Chmod )。

要测试这些更改,请在外部服务器上创建一个新的index.html文件,并使用以下内容加载它:

    TEST          

生成的输出应在yourwebsite.com/file.csv上镜像实时数据馈送

如果加载该html页面显示没有输出,请在firefox上按f12打开开发人员的控制台。 很可能你会看到一个错误:

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at yourwebsite.com/file.csv. This can be fixed by moving the resource to the same domain or enabling CORS. 

这意味着a)您的httpd.conf未正确配置/未保存,或b)您忘记重新启动Web服务器。

在.htaccess文件中,只需添加以下行:

 Header set Access-Control-Allow-Origin *