Javascript 试图让CORS为4chan API工作介绍_Javascript_Xmlhttprequest_Cors_Access Control

Javascript 试图让CORS为4chan API工作介绍

javascript cors

Javascript 试图让CORS为4chan API工作介绍,javascript,xmlhttprequest,cors,access-control,Javascript,Xmlhttprequest,Cors,Access Control,我正在编写一个脚本，它将改变一个人在线程中查看4chan的方式，并添加一些功能在4chan线程中，当您上载图像时，服务器将生成一个与原始文件同名的缩略图，并将该图像保存供用户查看，但名称为unix时间戳。单击缩略图时，其src将更改为其父级的href，这意味着图像的名称只是时间戳，根本不是有用的名称这有两个问题当线程具有404'd时，您可能无法再打开该映像，因为它已从服务器中删除您下载的图像的名称与显示的名称不匹配在中，您可以看到，唯一能够处理所有类型文件（我应该能够加载jpg、png

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

在4chan线程中，当您上载图像时，服务器将生成一个与原始文件同名的缩略图，并将该图像保存供用户查看，但名称为unix时间戳。单击缩略图时，其

src

将更改为其父级的

href

，这意味着图像的名称只是时间戳，根本不是有用的名称

这有两个问题

当线程具有404'd时，您可能无法再打开该映像，因为它已从服务器中删除

您下载的图像的名称与显示的名称不匹配

在中，您可以看到，唯一能够处理所有类型文件（我应该能够加载jpg、png、gif和webm）的无损方法是对服务器执行查询，请求文件，读取文件并将其转换为数据URI。当图像缓存在

src

属性中时，我可以（根据）简单地用原始文件名添加

download

属性，我的两点将得到解决

问题我将下面的脚本注入带有Chrome扩展的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。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”

将以下内容添加到呼叫时

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

我得到以下错误：

无法加载XMLHttpRequest。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。响应的HTTP状态代码为405

我正在http服务器上测试此功能，并尝试将其设置为

，

https…

和

http（s）…

，但没有成功

发件人：

CORS的来源为http（s）://boards.4chan.org

有人知道我怎么解决这个问题吗？我知道有一种方法可以使用

canvas

将img

src

es转换为数据URI，但这种方法可能会有损，并且仅限于jpg、png和webp（在Chrome中）。我已经决定使用这种方法，因为API明确规定应该为启用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)
})()

不确定除了来源为http（s）://boards.4chan.org的声明CORS受支持之外，还有什么问题可能不是真的

不管怎样，如果你不能让它以其他方式工作，一个后备方案可以使用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

response头的响应是运行前端代码的浏览器所看到的，因此浏览器现在显示给您的错误消息消失了，并且浏览器允许前端JavaScript代码访问响应

或者，您可以使用中的代码来设置自己的代理。

不确定问题出在哪里，除了源代码为http（s）://boards.4chan.org的声明CORS受支持之外，可能不是真的