跨源资源共享(CORS)和Javascript [英] Cross Origin Resource Sharing (CORS) and Javascript

问题描述

作为示例，我们使用以下网址: http://api.duckduckgo.com/?q=computer&format=json (此服务器上未启用CORS！)

As an example case let's take this url: http://api.duckduckgo.com/?q=computer&format=json (CORS not enabled on this server!)

1. 我们可以从任何流行的浏览器中以正常URL的形式从该URL中访问内容，浏览器打开该URL没有问题，服务器也不会返回任何错误.

1. We can access the contents from this URL from any popular browser as a normal URL, browser has no issues opening this URL nor the server returns any error.

诸如PHP/RoR之类的服务器端语言可以从此URL获取内容，而无需添加任何其他标题或特殊服务器设置.我使用了下面的PHP代码，并且很简单.

A server-side language like PHP/RoR can fetch the contents from this URL without adding any additional headers or special server settings. I used following PHP code and it simply worked.

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

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

I just started working in javascript framework, AngularJS. I used following code...

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代码，我收到以下错误:

With above AngularJS code, I received following error:

XMLHttpRequest无法加载http://api.duckduckgo.com/?q=computer&format=json.所请求的资源上没有"Access-Control-Allow-Origin"标头.因此，不允许访问来源"http://localhost:63342".

XMLHttpRequest cannot load http://api.duckduckgo.com/?q=computer&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

AngularJS使用JQuery，因此我在JQuery中使用以下代码尝试了同样的操作:

AngularJS uses JQuery so I tried the same in JQuery with following code:

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

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

This also produced the same error as did AngularJS code.

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

Then my further research brought me to the point that it's actually not specific to JQuery and AngularJS. Both of these inherit this issue from Javascript!

---

• 这里是解释CORS是什么以及如何使用它的绝佳资源: http://enable-cors.org/index.html .
• W3C也有它的官方CORS规范: http://www.w3.org/TR/cors/

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

So my question is not what CORS is. My question is

1. 我的理解是，无论是Web浏览器，PHP/RoR还是Javascript框架，都通过相同的http或https向URL发出请求，对吗?当然可以.那么，为什么来自javascript的请求必须http更安全?http和服务器如何知道该请求来自javascript?

1. My understanding is that whether it is a web browser or it is PHP/RoR or it is Javascript frameworks, all make requests to a URL via the same http or https, right? Certainly, yes. Then why http has to be more secure when requests come from javascript? How does http and server know that request is coming from javascript?

当网络浏览器可以打开URL且PHP/RoR(或任何服务器端语言)可以在没有任何其他设置/标题的情况下访问该URL时，为什么AngularJS，JQuery(或用一个词不能实现)javascript)访问该URL，除非服务器已为请求根目录设置 Access-Control-Allow-Origin 标头?

When a web browser can open a URL and PHP/RoR (or any server-side language) can access that URL without any extra settings/headers, why can't AngularJS, JQuery (or in a single word javascript) access that URL unless the server has set Access-Control-Allow-Origin header for requesting root?

Javascript中缺少哪些特殊功能(PHP/RoR具有和)，以便它无法在可以打开该URL的相同浏览器中访问相同URL而不会从其地址栏中出现任何问题?

What's that special feature (that PHP/RoR have and) that is missing in Javascript so that it can't access the same URL in the same browsers that can open that URL without any issue from their address bars?

只需提一下，我基本上是一名iOS开发人员，最近开始学习Web开发，尤其是AngularJS.所以我很好奇这是怎么回事以及为什么！

Just to mention that I am basically an iOS developer and recently started to learn web development, specially AngularJS. So I am curious about what's all this going on and why!

推荐答案

出于安全原因，已将其从javascript中禁用.这是一种情况:

It's disabled from javascript for security reasons. Here's one scenario:

• 假设Facebook具有在时间轴上发布消息" api，该API要求对用户进行身份验证.
• 您访问badsite.com时已登录Facebook.
• badsite.com使用JavaScript调用Facebook api.由于浏览器向Facebook发出了有效请求，因此将发送您的身份验证Cookie，并且Facebook接受该消息并在您的时间轴上发布Badsite的广告.
• Assume Facebook has a "post message on timeline" api that requires the user to be authenticated.
• You are logged into Facebook when you visit badsite.com.
• badsite.com uses javascript to call the Facebook api. Since the browser is making a valid request to Facebook, your authentication cookie is sent, and Facebook accepts the message and posts badsite's ad on your timeline.

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

This isn't an issue from a server, because badsite.com's server doesn't have access to your Facebook authentication cookie and it can't forge a valid request on your behalf.

这篇关于跨源资源共享(CORS)和Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！