title: Trying to get CORS to work for 4chan API
body: <h2>Introduction</h2>
  
  <p>I'm writing a script that will alter the way a person views 4chan, when inside a thread, as well as adding some functionality.</p>
  
  <p>In a 4chan thread, when you upload an image, the server will generate a thumbnail with the same name as the original file and also save that image for people to view, but with the name being the unix timestamp. When you click the thumbnail, its <code>src</code> is changed to its parent's <code>href</code>, meaning the name of the image is merely the timestamp, and not a useful name at all.</p>
  
  <p>There are two problems with this</p>
  
  <ol>
  <li>When the thread has 404'd, there is a chance that you can't open the image anymore, since it has been removed from the server.</li>
  <li>The name of the image you download doesn't match the displayed name.</li>
  </ol>
  
  <p>In <a href="https://stackoverflow.com/a/20285053/3791358">this SO answer</a>, 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 <code>src</code> attribute, I can (according to <a href="https://stackoverflow.com/a/10049353/3791358">this SO answer</a>) simply add a <code>download</code> attribute with the original filename, and my two points will be resolved.</p>
  
  <h2>The problem</h2>
  
  <p>I'm injecting the following script into 4chan with <a href="https://chrome.google.com/webstore/detail/styler/bogdgcfoocbajfkjjolkmcdcnnellpkb" rel="nofollow noreferrer">Styler</a>, a Chrome extension.</p>
  
  <pre><code>$(function(){
    if ($('body').hasClass('is_thread')) {
      $.getScript("http://my.url/updater.js").done(function() {
        $('html').addClass('done')
      }).fail(function() {
        $('html').addClass('done failed')
      })
    }
  })
  </code></pre>
  
  <p>The script at my url is then loaded into the document itself, and does its own thing from there on (I plan on sharing the code with some people, that's why I've (temporarily) put the script on a server).</p>
  
  <p>Inside the script there is a part that loops over all new posts and tries to request the file again.</p>
  
  <pre><code>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')
      }
    })
  }
  </code></pre>
  
  <p>The AJAX call is being made, but the following error occurs:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://i.4cdn.org/b/123456789.jpg" rel="nofollow noreferrer">http://i.4cdn.org/b/123456789.jpg</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://boards.4chan.org" rel="nofollow noreferrer">http://boards.4chan.org</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>When Adding the following to the call</p>
  
  <pre><code>headers: {
    'Access-Control-Allow-Origin': 'http://boards.4chan.org'
  }
  </code></pre>
  
  <p>I get the following error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://i.4cdn.org/b/123456789.jpg" rel="nofollow noreferrer">http://i.4cdn.org/b/123456789.jpg</a>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://boards.4chan.org" rel="nofollow noreferrer">http://boards.4chan.org</a>' is therefore not allowed access. The response had HTTP status code 405.</p>
  </blockquote>
  
  <p>I am testing this on the http server and have also tried setting it to <code>*</code>, <code>https...</code> and <code>http(s)...</code>, but no luck.</p>
  
  <p>From <a href="https://github.com/4chan/4chan-API" rel="nofollow noreferrer">the 4chan API</a>:</p>
  
  <blockquote>
    <p>CORS is supported with an origin of http(s)://boards.4chan.org</p>
  </blockquote>
  
  <p>Does anybody know how I can fix this? I know there is a way to convert img <code>src</code>es to data URI with <code>canvas</code>, but that can be lossy and is limited to jpg, png and webp (in Chrome). I've settled on this method, since the API specifically states that CORS should be enabled for <a href="http://boards.4chan.org" rel="nofollow noreferrer">http://boards.4chan.org</a>.</p>
  
  <p>If you want to do the same thing I'm doing, you will have to install Styler, copy the code and upload a file to a server. Here is a minimal updater.js file.</p>
  
  <pre><code>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)
  })()
  </code></pre>