跨域资源共享 (CORS) 和 Javascript

Question

我们以这个 url 为例：http://api.duckduckgo.com/?q=computer&format=json（此服务器上未启用 CORS！）

1. 我们可以从任何流行的浏览器访问这个 URL 中的内容，就像普通 URL 一样，浏览器打开这个 URL 没有问题，服务器也没有返回任何错误。

2. 像 PHP/RoR 这样的服务器端语言可以从这个 URL 获取内容，而无需添加任何额外的标头或特殊的服务器设置。我使用了以下 PHP 代码，它很简单。

   $url='http://api.duckduckgo.com/?q=computer&format=json';
   $json = file_get_contents($url);
   echo $json;
   

3. 我刚开始在 javascript 框架 AngularJS 中工作。我使用了以下代码...

   delete $http.defaults.headers.common['X-Requested-With'];
   var url="http://api.duckduckgo.com/?q=computer&format=json";
   $http.get(url)
        .success(function(data) {
            $scope.results=data;
         })
   

   使用上面的 AngularJS 代码，我收到以下错误：

   XMLHttpRequest 无法加载 http://api.duckduckgo.com/?q=computer&format=json。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://localhost:63342'。

4. AngularJS 使用 JQuery，所以我在 JQuery 中尝试了相同的代码：

   var url="http://api.duckduckgo.com/?q=computer&format=json";
   $.getJSON(url , function( data ) {
       console.log(data);
   });
   

   这也产生了与 AngularJS 代码相同的错误。

5. 然后我的进一步研究使我意识到它实际上并不特定于 JQuery 和 AngularJS。这两个都从 Javascript 继承了这个问题！

---

• 这是一个很好的资源，解释了什么是 CORS 以及如何处理它：http://enable-cors.org/index.html。
• W3C 也有官方 CORS 规范：http://www.w3.org/TR/cors/

---

所以我的问题不是 CORS 是什么。我的问题是

1. 我的理解是，不管是网页浏览器还是PHP/RoR还是Javascript框架，都是通过同一个http或者https向一个URL发出请求的，对吧？当然，是的。那么为什么当请求来自 javascript 时，http 必须更安全呢？ http 和服务器如何知道请求来自 javascript？

2. 当网络浏览器可以打开一个 URL 并且 PHP/RoR（或任何服务器端语言）可以在没有任何额外设置/标题的情况下访问该 URL，为什么 AngularJS、JQuery 不能javascript) 访问该 URL，除非服务器已设置 Access-Control-Allow-Origin 标头以请求 root？

3. Javascript 中缺少什么特殊功能（PHP/RoR 具有和），因此它无法在相同的浏览器中访问相同的 URL，而这些浏览器可以在地址栏中打开该 URL 而不会出现任何问题？

顺便提一下，我基本上是一名 iOS 开发人员，最近开始学习 Web 开发，特别是 AngularJS。所以我很好奇这一切发生了什么以及为什么！

Answer 1

出于安全原因，它已从 javascript 中禁用。这是一种情况：

• 假设 Facebook 有一个“在时间轴上发布消息”API，需要对用户进行身份验证。
• 当您访问 badsite.com 时，您已登录 Facebook。
• badsite.com 使用 javascript 调用 Facebook api。由于浏览器向 Facebook 发出有效请求，您的身份验证 cookie 被发送，Facebook 接受该消息并在您的时间线上发布 badsite 的广告。

这不是服务器的问题，因为 badsite.com 的服务器无权访问您的 Facebook 身份验证 cookie，也无法代表您伪造有效请求。

Answer 2

你记得所有的 javascript 请求都是由浏览器处理的。所以浏览器检测跨域请求很容易。

来自javascript的请求与PHP/RoR没有区别，只是被浏览器拒绝。

服务器代码可以通过标头“Access-Control-Allow-Origin”接受跨域javascript请求，因为在拒绝javascript请求之前，浏览器会向服务器发送请求“OPTIONS”以询问标头“Access-Control-Allow-Origin” “关于回应。如果值与当前来源匹配，浏览器将接受 javascript 请求并发送到服务器。

所有浏览器都执行此政策Same Origin Policy

Answer 3

请阅读http://en.wikipedia.org/wiki/Cross-site_scripting，您将了解其禁止 JavaScript 的原因。