试图让 CORS 为 4chan API 工作

Question

简介

我正在编写一个脚本，该脚本将改变人们在线程内查看 4chan 的方式，并添加一些功能。

在 4chan 线程中，当您上传图像时，服务器将生成与原始文件同名的缩略图，并将该图像保存以供人们查看，但名称为 unix 时间戳。单击缩略图时，其src 将更改为其父级的href，这意味着图像的名称只是时间戳，根本不是有用的名称。

这有两个问题

1. 当线程发生 404 错误时，您可能无法再打开该图像，因为它已从服务器中删除。
2. 您下载的图片名称与显示的名称不匹配。

在this SO answer 中，您可以看到唯一能够处理所有类型文件（我应该能够加载 jpg、png、gif 和 webm）的无损方法是对服务器进行查询，询问对于文件，读取它并将其转换为数据 URI。当图像缓存在src 属性中时，我可以（根据this SO answer）简单地添加一个带有原始文件名的download 属性，我的两点就会得到解决。

问题

我正在使用 Chrome 扩展程序 Styler 将以下脚本注入 4chan。

$(function(){
  if ($('body').hasClass('is_thread')) {
    $.getScript("http://my.url/updater.js").done(function() {
      $('html').addClass('done')
    }).fail(function() {
      $('html').addClass('done failed')
    })
  }
})

然后将我 url 上的脚本加载到文档本身中，并从那里开始做自己的事情（我计划与一些人共享代码，这就是我（暂时）将脚本放在服务器上的原因） .

在脚本中有一个部分循环遍历所有新帖子并尝试再次请求文件。

var $media = $post.find('img, video')
if ($media.length) {
  $.ajax({
    url: $media.parent().attr('href'),
    method: 'GET',
    success: function (data) {
      console.log(data)
    },
    error: function () {
      console.log('error')
    }
  })
}

正在进行 AJAX 调用，但出现以下错误：

XMLHttpRequest 无法加载 http://i.4cdn.org/b/123456789.jpg。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://boards.4chan.org' 因此不允许访问。

在调用中添加以下内容时

headers: {
  'Access-Control-Allow-Origin': 'http://boards.4chan.org'
}

我收到以下错误：

XMLHttpRequest 无法加载 http://i.4cdn.org/b/123456789.jpg。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://boards.4chan.org' 不允许访问。响应的 HTTP 状态代码为 405。

我正在 http 服务器上对此进行测试，并尝试将其设置为 *、https... 和 http(s)...，但没有运气。

来自the 4chan API：

支持 CORS，来源为 http(s)://boards.4chan.org

有人知道我该如何解决这个问题吗？我知道有一种方法可以使用 canvas 将 img srces 转换为数据 URI，但这可能是有损的，并且仅限于 jpg、png 和 webp（在 Chrome 中）。我已经选择了这种方法，因为 API 明确指出应该为 http://boards.4chan.org 启用 CORS。

如果你想做和我一样的事情，你必须安装 Styler，复制代码并将文件上传到服务器。这是一个最小的 updater.js 文件。

var jq
;(function () {
  var script = document.createElement('script')
  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
  script.type = 'text/javascript'
  script.onload = function () {
    jq = window.jQuery.noConflict()
    jq('.postContainer.replyContainer').each(function () {
      var $post = jq(this)
      var $media = $post.find('img, video')
      if ($media.length) {
        jq.ajax({
          url: $media.parent().attr('href'),
          method: 'GET',
          headers: {
            'Access-Control-Allow-Origin': 'http://boards.4chan.org'
          },
          success: function (data) {
            console.log(data)
          },
          error: function () {
            console.log('error')
          }
        })
      }
    })
  }
  document.getElementsByTagName('head')[0].appendChild(script)
})()

Answer 1

不确定问题可能是什么，而不仅仅是声明 CORS 支持源自 http(s)://boards.4chan.org 可能实际上不是真的。

无论如何，如果您无法使其正常工作，请回退以使用 CORS 代理。工作方式是，不要直接将您的请求发送到http://i.4cdn.org/b/123456789.jpg，而是将其发送到这里：

https://cors-anywhere.herokuapp.com/http://i.4cdn.org/b/123456789.jpg

这将导致请求被发送到https://cors-anywhere.herokuapp.com，一个代理然后将它发送到http://i.4cdn.org/b/123456789.jpg。当该代理收到响应时，它会接受它并向其添加 Access-Control-Allow-Origin 响应标头，然后将其作为响应传递回您的请求前端代码。

带有Access-Control-Allow-Origin 响应标头的响应是运行您的前端代码的浏览器所看到的，因此浏览器现在向您显示的错误消息消失了，并且浏览器允许您的前端 JavaScript 代码访问响应。

或者您可以使用来自https://github.com/Rob--W/cors-anywhere/ 的代码来设置您自己的代理。