Access-Control-Allow-Origin header needed when pulling data from a Google Sheet with Javascript? -


everyone! first post here, although i've been lurking quite while. basically, question taking data published google sheet , putting on website javascript. have been able done, using following code between script tags, in asterisks replaced actual thing (note code repeated multiple times different cells):

$.ajax("https://docs.google.com/spreadsheets/d/*spreadsheetid*/pub?gid=0&range=*cellid*&single=true&output=csv").done(function(result){     document.getelementbyid("*id*").innerhtml = result; }); 

i got code here , changed slight amount: getting value of cell google docs spreadsheet javascript

now, problem that, while works locally on own computer, not work when upload hosting service (if helps, i'm using hostinger , running latest version of chrome, although doesn't work on ie either). on post linked above said should work, despite cross domain issues, reason, doesn't seem to. when inspect element , go under console tab, there many "xmlhttprequest cannot load" errors (one each time tried access spreadsheet), , each following:

https://docs.google.com/spreadsheets/d/*spreadsheetid*/pub?gid=0&range=*cellid*&single=true&output=csv. no 'access-control-allow-origin' header present on requested resource. origin 'http://*mywebsite*' therefore not allowed access. 

before finish post, i'd add that, while know enough html , css make website, javascript skills lacking. lot of javascript i've used adapted other people have said, , me blindly believing them. tried adding other script tags in header, such these:

<script type="text/javascript" src="jquery-3.0.0.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

and can't sure if these helping me or sitting there pointlessly. did want add have put these in header though.

so, main questions are:

1) has else experienced problem or in past?

2) doing painfully wrong?

3) if not, there better way should pulling data published google spreadsheets?

4) if not, there code add in order avoid error in chrome? i've noticed many people saying can done using php header avoid this, i'd rather not use unless it's option. if there's way around error using javascript, ideal.

anyway, thank sees , takes time answer. feel such noob asking question, i've been searching on , off on past couple weeks , can't seem find solution works. other people experiencing same thing , can learn too. or maybe i'm crazy.

why error?

with javascript running in browsers, restrictions in place code can access.

javascript in browser can make requests content other sites via xmlhttprequests, $.ajax in background. however, restrictions in place under same-origin policy.

the reason policy, above link, allowing javascript make arbitrary cross-domain requests security concern:

assume user visiting banking website , doesn't log out. goes random other site , site has malicious javascript code running in background requests data banking site. because user still logged in on banking site, malicious code on banking site. example, list of last transactions, create new transaction, etc. because browser can send , receive session cookies banking website based on domain of banking website.

to avoid such scenario, have same-origin policy, prevents javascript making requests different websites, in short.

the main way access data different site javascript site you're making requests add access-control-allow-origin header when returns content. tells browser site you're requesting giving explicit permission site access content.

if sheets not allow functionality, suspect you'll need find different solution.

things try

  1. looking @ question linked, there's key parameter in request. suspect key parameter used authenticate request google's api, it's api key. crucial request, google can trace request you. google may refusing serve content because you're missing key.
  2. do research whether google provides formal cors api sheets.
  3. try of methods of circumventing policy, such jsonp.

basically, error means google hasn't provided header gives browser permission access content.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -