跨源资源共享（CORS）和Javascript

Question

举个例子，我们来看看这个网址： http://api.duckduckgo.com/?q=computer&format=json ：//api.duckduckgo.com/ http://api.duckduckgo.com/?q=computer&format=json 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，除非服务器是否为请求root设置了Access-Control-Allow-Origin标头？

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请求并发送到服务器。

所有浏览器都实施此策略同源策略

Answer 3

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