试图让 CORS 为 4chan 工作 API

Question

简介

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

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

这个有两个问题

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

在this SO answer, you can see that the only lossless method that is also able to handle all types of files (I should be able to load jpg, png, gif and webm) is doing a query to the server, asking for the file, reading it and converting it to a data URI. When the image is cached inside the src attribute, I can (according to this SO answer)中简单的加上一个download属性加上原来的文件名，我的两点就解决了。

问题

我正在使用 Styler 将以下脚本注入 4chan，一个 Chrome 扩展名。

$(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 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

有人知道我该如何解决这个问题吗？我知道有一种方法可以将 img srces 转换为具有 canvas 的数据 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/ 中的代码来设置您自己的代理。

试图让 CORS 为 4chan 工作 API

Trying to get CORS to work for 4chan API

javascript

xmlhttprequest

access-control

cors

简介

问题