javascript - 尝试让 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 将以下脚本注入(inject)到 4chan 中。

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

然后，我的网址处的脚本将加载到文档本身中，并从那里开始执行自己的操作(我计划与某些人共享代码，这就是为什么我(暂时)将脚本放在服务器上) .

脚本内部有一个部分会循环所有新帖子并尝试再次请求文件。

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 cannot load http://i.4cdn.org/b/123456789.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://boards.4chan.org' is therefore not allowed access.

将以下内容添加到通话中时

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

我收到以下错误:

XMLHttpRequest cannot load http://i.4cdn.org/b/123456789.jpg. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://boards.4chan.org' is therefore not allowed access. The response had HTTP status code 405.

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

来自the 4chan API:

CORS is supported with an origin of 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 响应 header ，然后将其作为响应传递回您的请求前端代码。

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

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