跨域资源共享 (CORS) 概念

问题描述

我有一个关于跨域 JavaScript 概念的问题.

I have a question on the concept cross domain JavaScript.

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

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

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

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跨域的方式，但是没用.

PS: I used jquery cross domain way too, but didnt work.

但是，如果选择的域中的某个域使用亚马逊的网络服务，有一个 JavaScript，如果我们将其包含在我们的 html 中，它就可以工作.

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>

他们有办法通过 Ajax 获得响应.

They have a method to get response by Ajax.

我的问题是:

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

推荐答案

前面的重要说明:如果另一端的服务器没有启用它，你的客户端 允许跨域 ajax 请求的代码.

Important note up front: If the server at the other end doesn't enable it, there's nothing you can do in your client-side code that will allow a cross-origin ajax request.

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

Let me give you a background before answering your question:

简单地说，同源安全策略确保来自一个来源的脚本不会从其他来源获取内容.现在为了解释起源的概念，让我引用维基百科同源安全政策的文章的部分内容:

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:

下表概述了针对 URLhttp://www.example.com/进行检查的典型结果目录/page.html".

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.

与其他浏览器不同，Internet Explorer 在计算来源时不包括端口，而是使用安全区域代替它.

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

因此，例如，您的 JavaScript 无法从(也就是向其发出 HTTP 请求)Web 服务器下载任何东西，而不是它源自的服务器.这正是您不能向其他域发出 XmlHttpRequest(又名 AJAX)的原因.

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 是一种另一端的服务器(不是浏览器中的客户端代码)可以放宽同源政策.

CORS is one way the server at the other end (not the client code in the browser) can relax the same-origin policy.

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

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 访问.

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.

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

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:

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

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

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

Access-Control-Allow-Origin: *

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