title: Access-Control-Allow-Origin header needed when pulling data from a Google Sheet with Javascript?
body: <p>everyone! First post here, although I've been lurking for quite a while. Basically, my question is about taking data from a published Google sheet and putting it on a website with Javascript. I have been able to get this done, using the following code between script tags, where anything in asterisks is replaced by the actual thing (note that this code is repeated multiple times for different cells):</p>
  
  <pre><code>$.ajax("https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&amp;range=*cellId*&amp;single=true&amp;output=csv").done(function(result){
      document.getElementById("*id*").innerHTML = result;
  });
  </code></pre>
  
  <p>I got this code from here and changed it a slight amount: <a href="https://stackoverflow.com/questions/14885231/getting-value-of-a-cell-from-google-docs-spreadsheet-into-javascript">Getting value of a cell from google docs spreadsheet into javascript</a></p>
  
  <p>Now, the problem with this is that, while it works locally on my own computer, it does not work when I upload it to my hosting service (if it helps, I'm using Hostinger and running the latest version of Chrome, although it doesn't work on IE either). Somebody on the post linked above said that this should work, despite cross domain issues, but for some reason, it doesn't seem to. When I inspect element and go under the console tab, there are many "XMLHttpRequest cannot load" errors (one for each time I tried to access the spreadsheet), and they each say the following:</p>
  
  <pre><code>https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&amp;range=*cellId*&amp;single=true&amp;output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://*myWebsite*' is therefore not allowed access.
  </code></pre>
  
  <p>Before I finish up my post, I'd like to add that, while I know enough HTML and CSS to make a website, my Javascript skills are currently very lacking. A lot of the Javascript I've used is adapted from what other people have said, and me blindly believing them. I tried adding some other script tags in the header, such as these:</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery-3.0.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And I really can't say for sure if these are helping me or just sitting there pointlessly. I did want to add that I have put these in my header though.</p>
  
  <p>So, my main questions are:</p>
  
  <p>1) Has anyone else experienced this problem currently or in the past?</p>
  
  <p>2) Am I doing something painfully obviously wrong?</p>
  
  <p>3) If not, is there a better way I should be pulling data from published Google spreadsheets?</p>
  
  <p>4) If not, is there some code I could add in order to avoid the error in Chrome? I've noticed many people saying something can be done using a PHP header to avoid this, but I'd rather not use that unless it's really the only option. If there's a way to get around the error using Javascript, that would be ideal.</p>
  
  <p>Anyway, thank you so much to anyone who sees this and takes the time to answer. I feel like such a noob asking this question, but I've been searching on and off over the past couple weeks and I can't seem to find a solution that works. Hopefully other people are experiencing the same thing and can learn from this too. Or maybe I'm just crazy.</p>