跨源资源共享(CORS)和Javascript

Question

作为一个示例,让我们拿这个网址:( 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. 我的理解是,无论是Web浏览器还是PHP/RoR,或者它是Javascript框架,都通过相同的http或https向URL发出请求,对吧？当然,是的.那么当请求来自javascript时,为什么http必须更安全？http和服务器如何知道该请求来自javascript？

2. 当Web浏览器可以打开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,也无法代表您伪造有效请求.