本地主机上的 Disqus Javascript API 跨域问题答案

【问题标题】：Disqus Javascript API crossdomain issue on localhost本地主机上的 Disqus Javascript API 跨域问题
【发布时间】：2012-09-29 20:44:41
【问题描述】：

我正在尝试构建一个页面，该页面显示指向我的一堆博客文章的链接，并且每个链接旁边都有一个小气泡，其中包含该文章的评论数。认为最简单的方法是使用 disqus 在他们的开发文档中谈到的“面向公众的 JavaScript API”。

如果我在浏览器中访问此链接，我会得到我正在寻找的 JSON：

https://disqus.com/api/3.0/threads/details.json?forum=BLOG_FORUM&thread:ident=BLOG_THREAD&api_key=PUBLIC_API_KEY

但是，当我尝试从 jQuery 加载它时，它给了我可怕的 XMLHttpRequest cannot load: Origin is not allowed by Access-Control-Allow-Origin.

我已经尝试使用 $.getJSON() 和 $("#div").load() 来加载它。

我已将 localhost 和 127.0.0.1 添加到 Disqus API 中的“链接到我的公钥的域”设置中。

【问题讨论】：

我找不到您所指的“面向公众的 JavaScript API”。他们的JavaScript page 上有一些东西，但听起来都不是。
他们在这里在第一句话中谈论它：disqus.com/api/docs/requests 但他们没有进一步解释:(
问题是你需要做一个JSONP请求。事实上的标准是回调参数。使用jQuery.getJSON，您只需添加&callback=?，jQuery 就会从那里获取它。我仍然认为count.js 在这种特殊情况下更容易。
如果您想将其添加为答案，我会接受。此外，我必须确保请求是发往 details.jsonp 而不是 details.json。虽然 count.js 很棒，但不幸的是我需要能够自定义我的计数显示
我添加了另一个答案。但是，我认为您也可以将 Disqus 配置为仅使用 count.js 显示原始数字，然后根据需要设置样式。

标签： javascript jquery cross-domain disqus

【解决方案1】：

要在客户端使用this API，你需要做一个JSONP请求。事实上的标准是指定函数名称的回调参数。 Disqus 还需要将.json 更改为.jsonp 使用jQuery.getJSON，然后您只需添加&callback=?，jQuery 就会从那里获取它。

【讨论】：

我的要求总是很糟糕，我不明白。我使用 Mootools -> Request.JSONP({..}).send();作为网址：“disqus.com/api/3.0/threads/…?”你能帮我吗？？？

【解决方案2】：

您不能在响应标头中添加 "localhost" 作为 Origin 条目。这是因为 CORS

的 JavaScript 安全规范

Access-Control-Allow-Origin可以设置为*，允许任何网站通过XMLHTTPRequest/AJAX访问数据，但不能设置为“本地主机”。

解决该问题的可能解决方案是：在公共域/位置托管发出请求的页面，并在响应标头 Access-Control-Allow-Origin 中包含主机名。

正如“@Matthew Flaschen”所说，您可以使用带有&callback=? 的 JSONP 请求来完成此操作

或者作为最后的手段，通过在“src”属性中指定 URL 并访问 JSON 数据，将 JSON 结果与 <script> 标签中的脚本一起加载例如：修改服务器端的结果以包含<variable_name>={JSONObject} 技术，并且在脚本加载时，可以通过该变量访问数据
有些人遇到了同样的问题here

还是不明白为什么浏览器会拒绝Access-Control-Allow-Origin=localhost，但支持Access-Control-Allow-Origin=*（意味着任何公共网站都可以访问数据但是......）这件事可能有一些阴谋（跟踪访问数据的网站）

【讨论】：

【解决方案3】：

实际上，您可以通过遵循these instructions 来使用脚本和数据驱动属性来做到这一点。您只需加载 Disqus count.js 脚本，然后使用 data- 属性。

编辑：您可以将其配置为仅显示整数 here（然后您可以随意设置样式）。

【讨论】：

这看起来很有希望，马修，谢谢，会尝试一下，让你知道它是如何工作的
这在单页应用程序中是不可能的。

【解决方案4】：

我认为你只需要顶部的这个标题：

<?php header('Access-Control-Allow-Origin: http://disqus.com'); ?>

【讨论】：

您不能向不提供标题的网站添加标题。