如何集成CORS，谷歌博客和JavaScript

How to integrate CORS, Google Blog and JavaScript?

本文关键字：谷歌 JavaScript CORS 何集成 集成      更新时间：2023-09-26

我在一个网页上有一个正在工作的JavaScript，它get从博客网站上删除我的博客，并将其显示在我网页的侧边栏中。换句话说，我在一个地方写博客，但也在另一个地方（我的网页）显示我的博客内容。

该脚本使用跨源共享（CORS），如下所示：

$(
  function () {
    $.get(
     'http://www.corsproxy.com/my_name.soup.io/rss/original',
     function (data) {
      var items = data.getElementsByTagName('item');
      var thoughts = $('#activity ul');
      var count = 0;
      $(items).each(function (i, e) {
        count++;
        if (count > 10) return;
        thoughts.append('<li>'
          + e.getElementsByTagName('description')[0].textContent
          + '<small>' 
          + $.timeago( new Date(e.getElementsByTagName('pubDate')[0].textContent) )
          + '</small></li>');
     });
    }, 'xml'
   );
  }
);

我想把我的博客移到谷歌博客上，并有一个如下所示的帐户URL：http://my_name.blogspot.com/feeds/posts/default

但我认为我仍然需要调用CORS，这样网站上的JavaScript就可以跨域访问谷歌网站。我尝试过直接使用Google URL，但脚本没有get内容。

我应该如何更改JavaScript，以便运行JavaScript的网页显示谷歌博客中的内容？

顺便说一句：使用相同的JavaScript，我可以在网页上显示Github帐户中的内容（提交的标题）。在这种情况下，我不使用CORS；以下JavaScript按预期工作：

$.getScript(
  '/public/bin/jquery.timeago.js',
  function () {
    $.getScript(
      '/public/bin/jquery.github-activity.js',
      function () {
        $("#gh-activity ul").githubActivityFor("my_name", { limit: 10 });
      }
    );
  }
);

为什么Github get在不使用CORS的情况下工作？

我可以重新配置谷歌博客的get，使其与我的Github帐户的get相同吗？

检查githubActivityFor调用的代码，我们看到：

$.get('https://api.github.com/users/' + username + '/events?callback=?', function(activity) {
    ...
},
"jsonp");

"jsonp"参数告诉jQuery这里正在使用JSONP，并且资源应该加载在<script>标记中，而不是使用Ajax获取。果不其然，我们实际上是从URL模板中查看用户的活动提要，它是一个脚本。因此，jQuery可以以通常的方式执行JSONP脚本加载：

  • 将回调函数（即第二个参数）存储在具有随机长名称（如jQuery35758395）的变量中
  • 将callback=?中的?替换为相同的值（例如jQuery35758395）
  • 在<script>标签中加载脚本资源

Github资源（像任何传统的JSONP服务器端端点一样）设置为在脚本开头的函数调用中使用callback参数的值（例如，jQuery35758395（｛'some'：'data'｝）。当脚本运行时，函数调用被执行，它会触发我们在获取之前设置的随机命名回调。

事实证明Blogger已经在他们的服务器上支持JSONP了。如果您访问http://foobar.blogspot.com/feeds/posts/default?callback=foobaz您将看到提要数据封装在函数调用中。要利用这一点，只需使用callback=?参数执行$.get即可：

$.get(
     'http://my_name.blogspot.com/feeds/posts/default?callback=?',
     function (data) {
         ...
     },
     "jsonp");

这将自动在后台执行JSONP，并使用XML字符串正确调用回调函数。不幸的是，该字符串不会被解析为DOM结构，但jQuery函数（也称为$）可以为您解析data字符串：

var feedDOM = $(data).get(1);

get调用从jQuery对象中提取DOM结构，但您也可以将其保留在jQuery对象内，并使用jQuery函数对其进行检查。或者，您也可以提供XML字符串作为jQuery选择器的上下文参数：

var authorTags = $("author", data);
相关文章：