跨源资源共享(CORS)和Javascript

时间:2014-02-19 15:59:26

标签: javascript jquery angularjs cors

作为一个示例,我们来看看这个网址: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”标头。因此,不允许来源“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继承了这个问题!



  6. 所以我的问题不是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而不会在地址栏中出现任何问题?

    4. 请注意,我基本上是一名iOS开发人员,最近开始学习Web开发,特别是AngularJS。所以我很好奇这是怎么回事以及为什么!

3 个答案:

答案 0 :(得分:6)

出于安全原因,它已从javascript禁用。这是一个场景:

  • 假设Facebook在时间轴上发布了“消息”api,要求用户进行身份验证。
  • 当您访问badsite.com时,您已登录Facebook。
  • badsite.com使用javascript调用Facebook api。由于浏览器向Facebook发出有效请求,因此会发送您的身份验证Cookie,Facebook会接受该消息并在您的时间轴上发布badsite的广告。

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

答案 1 :(得分:1)

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

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

服务器代码可以通过标题接受跨源javascript请求" Access-Control-Allow-Origin"因为在拒绝javascript请求之前,浏览器会发送请求" OPTIONS"服务器询问标题"访问控制 - 允许 - 来源"回应。如果值与当前来源匹配,浏览器将接受javascript请求并发送到服务器。

所有浏览器都实施此政策Same Origin Policy

答案 2 :(得分:1)

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