title: Cross-origin JSON request
body: <p>I am writing HTML/CSS/JS for a Twitch.tv application. I request (public, non-sensitive) data through their main <a href="https://github.com/justintv/Twitch-API" rel="nofollow">API endpoint</a> (api.twitch.tv), but one piece of data has not been integrated. This data, however, is viewable at another sub-domain (tmi.twitch.tv). Unfortunately, when I make a $.getJSON call (or $.AJAX with dataType: JSON), I receive the following in Firefox 44.0.2:</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="https://tmi.twitch.tv/" rel="nofollow">https://tmi.twitch.tv/</a>{rest of URL}. (Reason: CORS header 'Access-Control-Allow-Origin' missing).</p>
  </blockquote>
  
  <p>I've known of this security mechanism as a user, but not as a (<em>novice</em>) programmer. I read a lot in attempt to manage, but I am still lost.</p>
  
  <p><strong>What I've gathered</strong>:
  A common workaround is requesting JSONP. Unlike JSON, the browser does not enforce cross-origin policy on JSONP. I know that the main Twitch API is JSONP-friendly and probably has CORS enabled. In contrast, I imagine tmi.twitch.tv does not have CORS enabled.</p>
  
  <p><strong>What I've tried:</strong>
  I've appended my request URL with <code>?callback=</code>, <code>?callback=differentStrings</code>, and <code>?otherQuery=value&amp;callback=differentStrings</code>. These did not work. I changed my dataType to jsonp, and without additional query strings (just changing dataType appended two query strings: callback=jQuery{long number}_{long number} &amp; _={long number}, I did not receive an x-origin block. However, I did get the following: </p>
  
  <blockquote>
    <p>SyntaxError: missing ; before statement | Line 1: Character 8</p>
  </blockquote>
  
  <p>for this object I requested:</p>
  
  <pre><code>{"hosts":[{"host_id":118084843,"target_id":41981587,"host_login":"politecpu","target_login":"politemaster"},{"host_id":118082906,"target_id":41981587,"host_login":"politerobot","target_login":"politemaster"}]}
  </code></pre>
  
  <p>I am stuck. I do not know if this is a problem with the format of the data/JSONP nor if I found a workaround for x-origin, as my success(-ful receipt of data) function did not work. What should I consider next?</p>
  
  <p>I'd like to emphasize that I am an <em>absolute novice</em> (I only recently completed Codecademy lessons for JS and jQuery). Thank you kindly in advance for thoughts and comments.</p>
  
  <p>(Edit) My function:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var allHosts = [];  // To be compared against new JSON periodically called via checkHosts()
  var getHosts = function() {
   allHosts = [];
   $.ajax({
    url: 'https://tmi.twitch.tv/hosts?include_logins=1&amp;target=' + myID,
    dataType: 'jsonp',
    success: function(data) {
     data.hosts.forEach(function(element) {
      allHosts.push(element.host_id);
     });
     debug('getHosts():', 'data =', data, 'allHosts =', allHosts, 'queue =', queue, 'busy =', busy); // Not relevant
    },
   });
  }</code></pre>
  </div>
  </div>
  </p>