My spreadsheet is stored in drive, set to "Anyone on the internet with this link can view". The Google Apps Script project is also in drive, and I was doing the testing on the "Test deployment" Web App. I will try testing on a "Deployment version" later, but based on what you're saying, shouldn't it be working?
On Tuesday 17 September 2024 at 04:23:05 UTC+2 Ray Thomas wrote: > Are you testing this locally or from a web server? If you're testing this > locally unless something from the likes of > https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9 > > works for you, it is unlikely the charts will display. They should be fine > if the app is on an actual server. > > I've got about 30 charts <https://brisray.com/google-charts/> with the > data coming from Google Sheets and I can't see a single one of them while > I'm writing them because of CORS. They all display properly once they are > are uploaded to the web server. > > The spreadsheet has to be set to "Anyone on the internet with this link > can view" or you can use OAuth > <https://developers.google.com/identity/protocols/oauth2>. The Charts API > documentation has it's own little section about using Google Sheets > <https://developers.google.com/chart/interactive/docs/spreadsheets>. > > > On Monday, September 16, 2024 at 12:52:26 PM UTC-4 EGJ Moorington wrote: > >> Hello! >> >> I'm developing a web app with Google Apps Script, and I want to send a >> Query using google.visualization.Query to create a >> google.visualization.DataTable automatically from data fetched from a >> Google SpreadSheets file. >> >> However, upon sending the query, I'm getting the following errors in the >> console: >> >> - Access to XMLHttpRequest at 'https://docs.google.com/spreadsheets/d/ >> *spreadsheetID*?sheet=*sheetName*&tq=select%20*column*&tqx=reqId%3A0' >> from origin 'https://*...*script.googleusercontent.com' has been blocked >> by CORS policy: No 'Access-Control-Allow-Origin' header is present on the >> requested resource. >> >> - GET https://docs.google.com/spreadsheets/d/*...* net::ERR_FAILED 302 >> (Found) >> >> - Uncaught Error: Error handling Query: XhrHttpError: Request Failed, >> status=0, url=https://docs.google.com/spreadsheets/d/ >> *...* >> I've noticed that 'Access-Control-Allow-Origin' does not figure in the >> "Restrictions in IFRAME mode" list, but on the page talking about data >> queries, it is mentioned that when sending queries from within Apps Script, >> IFRAME mode should be used, which I am using. >> >> Any help would be greatly appreciated, thanks! >> >> Here's a list of some of the documentation I've been following: >> Preparing data for Charts >> <https://developers.google.com/chart/interactive/docs/basic_preparing_data> >> . >> Data Queries >> <https://developers.google.com/chart/interactive/docs/queries>. >> Restrictions in IFRAME mode >> <https://developers.google.com/apps-script/guides/html/restrictions#restrictions_in_iframe_mode> >> . >> >> Here's the relevant code: >> js/tables.html: >> <script> >> const url = "https://docs.google.com/spreadsheets/d/*spreadsheetID*"; >> >> function drawTable() { >> const dataTable = new google.visualization.DataTable() >> sendQuery("*sheetName*") >> } >> >> function sendQuery(sheet) { >> var u = `${url}?sheet=${sheet}` >> console.log(u) >> var query = new google.visualization.Query(`${url}?sheet=${sheet}`) >> query.setQuery("select *column*") >> query.send(handleQueryResponse) >> } >> >> function handleQueryResponse(response) { >> console.log(response.getMessage()) >> console.log(response.getDetailedMessage()) >> if (response.isError()) { >> alert('Error in query: ' + response.getMessage() + ' ' + response >> .getDetailedMessage()); >> return >> } >> console.log(response.toString()) >> } >> </script> >> >> >> page.html: >> <!DOCTYPE html> >> <html> >> <head> >> <base target="_top"> >> <meta name="viewport" content="width=device-width, initial-scale=1"> >> <?!= include('css/style') ?> >> >> <!-- Logic for charts tables --> >> <script type="text/javascript" src=" >> https://www.gstatic.com/charts/loader.js";></script> >> <?!= include('js/tables') ?> >> <script type="text/javascript"> >> google.charts.load('current', {'packages':['table']}); >> google.charts.setOnLoadCallback(drawTable); >> </script> >> >> </head> >> <body> >> <div id="table_div"></div> >> </body> </html> >> >> code.gs: >> // Variables >> var page = "index" >> var output = HtmlService.createHtmlOutput('<p></p>') >> >> function doGet(e) { >> // Get information from the url >> const p = e.parameter.page >> page = p >> return HtmlService.createTemplateFromFile(e.parameter['page']) >> .evaluate() >> .setSandboxMode(HtmlService.SandboxMode.IFRAME) >> } >> >> // Get the URL for the Google Apps Script running as a WebApp >> function getScriptUrl() { >> var url = ScriptApp.getService().getUrl() >> return url >> } >> >> function include(filename) { >> return HtmlService.createHtmlOutputFromFile(filename).getContent(); >> } >> >> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/569c6d43-1d4c-4506-bfc5-77e4bd5ccaa3n%40googlegroups.com.
