跨域的JavaScript(CORS)的概念 [英] Cross domain javascript (CORS) concept

查看:207
本文介绍了跨域的JavaScript(CORS)的概念的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对这个概念跨域问题的JavaScript。

有服务器(例如amazon.com),其中仅在选定的站点可以使用他们的Web服务。 所以肯定,如果我尝试使用他们的服务,从我的地方,我不能。 我得到这个在我的控制台

  

跨域请求阻止:同源策略不允许的阅读   在远程资源   <一href="http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0">http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0.   这可以固定通过移动资源到相同域或   启用CORS。

PS:我用jQuery的跨域太多,但没有工作

但是,如果某一领域谁是选择的中,使用亚马逊的web服务,有一个JavaScript,它如果我们在我们的HTML包括,它的工作原理。

 &LT;脚本SRC =htt​​p://example.com&GT;&LT; / SCRIPT&GT;
 

他们有一个方法来获得响应阿贾克斯。

我的问题是:

  1. 当我们提到一个JavaScript文件来自Internet URL会发生什么。我们有我们的机器上运行的本地副本?
  2. 创建HTT prequest,将有一个请求源作​​为我的域或XYZ。
解决方案

让我给你一个背景回答你的问题之前:

同源安全政策

简单地说,相同来源的安全策略,确保从一个起源脚本可能无法从其他来源获取的内容。现在来解释你起源的概念,让我引述同源安全策略的维基百科条目

  

下表列出了典型的结果的概述对URL检查 HTTP:// WWW .example.com的/ DIR / page.html即可

 相比URL结果原因
-------------------------------------------------- ----- ------- ----------------------
http://www.example.com/dir/page2.html成功相同的协议和主机
http://www.example.com/dir2/other.html成功相同的协议和主机
HTTP://用户名:password@www.example.com/dir2/other.html成功相同的协议和主机
http://www.example.com:81/dir/other.html故障相同的协议和主机上,但不同的端口
https://www.example.com/dir/other.html失败不同的协议
http://en.example.com/dir/other.html失败不同的主机
http://example.com/dir/other.html失败不同的主机(精确匹配要求)
http://v2.www.example.com/dir/other.html失败不同的主机(精确匹配要求)
http://www.example.com:80/dir/other.html取决于端口明确。依赖于浏览器的实现。
 

     

与其他浏览器,Internet Explorer不包括端口号,原产地的计算,使用安全区域在它的地方。

因此​​,举例来说,你的JavaScript无法从(又名,使一个HTTP请求)Web服务器比它起源于服务器的其他下载任何东西。这就是为什么你不能到其他领域做出XmlHtt prequests(又称AJAX)。


CORS是可以放宽同源策略的一种方式

过于简单说明有关跨地资源共享(CORS)

  

通过添加新的HTTP头,允许服务器服务资源允许原始域的CORS标工程。浏览器支持这些标题和尊重,他们建立的限制。

示例:你说你的网站是 http://my-cool-site.com 和,你在域中的第三方API http://third-party-site.com ,您可以通过AJAX访问。

和假设,从您的服务器的网页 my-cool-site.com 提出申请,要求 third-party-site.com 。通常情况下,用户的浏览器将下降AJAX调用比每同源安全政策。但是,如果浏览器和第三方服务器支持CORS,下面的事情发生了:

  • 浏览器将发送和原产地 HTTP标头 third-party-site.com

     产地:http://my-cool-site.com
     

  • 如果第三方服务器接受来自您的域名的请求,这将响应一个访问控制 - 允许 - 原产地 HTTP标头:

     访问控制 - 允许 - 产地:http://my-cool-site.com
     

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

     访问控制 - 允许 - 产地:*
     

  • 如果您的网站是不允许​​的,浏览器会抛出异常。

如果支持CORS 客户都颇具现代浏览器,你的第三方服务器的支持CORS 还有,CORS可以对你有用。

我发现href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#cors" rel="nofollow">上好的解释

  

要进行CORS请您只需使用 XMLHtt prequest 在Firefox 3.5 +,Safari浏览器4+和Chrome和 XDomainRequest 在IE8 +对象。当使用 XMLHtt prequest 的对象,如果浏览器看到你正在试图让跨域请求,它会无缝地引发CORS行为。

     

下面是一个JavaScript功能,可帮助您创建一个跨浏览器的CORS对象。

 函数createCORSRequest(方法,URL){
    VAR XHR =新XMLHtt prequest();
    如果(在XHRwithCredentials){
        // XHR有那么只要它支持CORSwithCredentials属性
        xhr.open(方法,URL,真正的);
    }否则,如果(typeof运算XDomainRequest!=未定义){//如果IE浏览器使用XDR
        XHR =新XDomainRequest();
        xhr.open(方法,URL);
    } 其他 {
        XHR = NULL;
    }
    返回XHR;
}
 


以上原因,为什么你不能从你的脚本中使用Amazon的Web服务。和亚马逊的服务器将只允许下载的JavaScript文件的网页,从选择的域提供。

要回答你的编号的问题:

    • 该文件将被浏览器下载的,如果它是在相同的原点。
    • 如果它不是在同一个起源,该文件将被若CORS请求成功下载。
    • 或其他方式下载的脚本将失败。
    • 如果下载成功,JavaScript文件的内容将被加载到浏览器的内存中,除preTED,并执行。
  1. 查看CORS的描述来了解。

I have a question on the concept cross domain JavaScript.

There is server(ex amazon.com) where in only selected domains can use their web-service. So definitely, if I try to use their service, from my local, I cannot. I got this on my console

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: I used jquery cross domain way too, but didnt work.

But if some domain who is among the selected ones, to use Amazon's webservice, has a JavaScript, which if we include in our html, it works.

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

They have a method to get response by Ajax.

My questions are:

  1. What happens when we refer a JavaScript file from an internet url. Do we have a local copy running on our machine?
  2. Is the httpRequest created, will have a request source as my domain or the xyz.

解决方案

Let me give you a background before answering your question:

Same-Origin Security Policy

Simply put, same-origin security policy makes sure that scripts from one origin may not fetch content from other origins. Now to explain you the concept of origin, let me quote part of the 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.

So, for example, your JavaScript cannot download anything from (aka, make an HTTP request to) a web server other than the server it originated from. This is exactly why you cannot make XmlHttpRequests (aka AJAX) to other domains.


CORS is one way you can relax the same-origin policy.

An Oversimplified Description about 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.

Example: Say your site is http://my-cool-site.com and, you have a third party API at domain http://third-party-site.com, which you can access via AJAX.

And let's assume that a page from your server my-cool-site.com made a request to third-party-site.com. Normally, users browser will decline AJAX calls to any other site other than your own domain/subdomain per the Same-Origin Security Policy. But if the browser and the third party server supports CORS, following things happen:

  • Browser will send and Origin HTTP header to third-party-site.com

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

  • If the third party server accepts requests from your domain, it will respond with an Access-Control-Allow-Origin HTTP header:

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

  • To allow all domains, third party server can send this header:

    Access-Control-Allow-Origin: *
    

  • If your site is not allowed, browser will throw an error.

If the client's have fairly modern browsers that support CORS, and your third party server supports CORS as well, CORS can be useful to you.

I found a nice explanation on CORS here.

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


The above reasons are why you cannot use Amazon's web services from your script. And Amazon server will only allow downloading their JavaScript files to pages served from selected domains.

To answer your numbered questions:

    • The file will be downloaded by the browser if it is in the same origin.
    • If it is not in the same origin, the file will be downloaded if a CORS request succeeds.
    • Or otherwise, downloading the script will fail.
    • If the download succeeds, the content of the JavaScript file will be loaded to browser's memory, interpreted, and executed.
  1. See description on CORS to understand.

这篇关于跨域的JavaScript(CORS)的概念的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆