2f:T4d4,If you're coming up against [CORS restrictions](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) [fetching data](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) into a published notebook, [@tomlarkworthy](https://observablehq.com/@tomlarkworthy) makes available [***fetchp***](https://observablehq.com/@tomlarkworthy/fetchp); a drop in replacement for [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) that will work in published notebooks. But what if your notebook is private? One option is to use a proxy (egs: [sofetch](https://observablehq.com/@alecglassford/so-fetch), [fetch js](https://observablehq.com/@randomfractals/fetch) ); assuming that proxy's availability is stable. If the data being accessed is [csv or tsv](https://www.google.com/sheets/about/) formatted, this notebook demonstrates an alternative that utilizes [Google Sheets](https://www.google.com/sheets/about/) as a reliable proxy server for the otherwise CORS-restricted request. This strategy utilizes Google Sheets': * [***IMPORTDATA***](https://support.google.com/docs/answer/3093335?hl=en) function; * [***Publish Files as Web Pages***](https://support.google.com/a/users/answer/9308870?hl=en) feature.30:T42c,To confirm the fetch request was blocked by the CORS policy, use your browser's [developer tool](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) and review the error message:

As detailed in [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS):

The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers. Modern browsers use CORS in APIs such as XMLHttpRequest or [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to mitigate the risks of cross-origin HTTP requests.

CORS Process Workflow: [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

31:T5e2,### [***IMPORTDATA***](https://support.google.com/docs/answer/3093335?hl=en) Critical to the technique is assigning the following formula in the sheet's **A1** cell: ***=IMPORTDATA("https://github.com/datablist/sample-csv-files/raw/main/files/organizations/organizations-100.csv")*** The function's url parameter is the same data access url that was not accessible via the direct/non-proxied fetch. The spreadsheet function retrieves the data and keeps it updated with a [1 hour refresh rate](https://support.google.com/docs/answer/58515#zippy=%2Cchoose-how-often-formulas-calculate). Factor this in if your application requires a more frequent refresh rate. If your url has parameters to qualify the request, it would be reflected in what's passed to the ***IMPORTDATA*** function. Example: If ***organizations-100.csv*** was produced by a ***dataServer.com*** server-side process with staring date of *Start*, the url parameter could be constructed with the [CONCAT](https://support.google.com/docs/answer/3094123?hl=en), [TEXT](https://support.google.com/docs/answer/3094139?hl=en&ref_topic=3105625) and [TODAY](https://support.google.com/docs/answer/3092984?hl=en) sheet functions: > =***IMPORTDATA***(***CONCAT***("https://dataServer.com/getOrganizations-100?Start=",***TEXT***(***TODAY***(),"MM/DD/YY"))) Remember to place the function in cell **A1**. The following publishing, proxy fecthing and response parsing depend on only the proxied data being in a single Google Sheet.32:T4cf,/* Usage in md/html: `${yield* progressivelyStrike(["String to Progrssively Strike","NoStrike"],.5, 2)}` where "String to Strike" is the strikable string","NoStrike" is non-strikable .5 is proportion of second pause between strike; defaults to 1; 2 is Heading level; defaults to undefined...no heading References: https://observablehq.com/@observablehq/introduction-to-generators https://observablehq.com/@observablehq/custom-generators https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/yield* https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function* Related: https://observablehq.com/@mootari/custom-inspectors#throbber */ function* progressivelyStrike(aStr, iteration = 1, level = undefined) { let i = 0; const len = aStr[0].length; const levelIt = (s, l) => (l ? html`${s}${aStr[0]} levelIt( `~~${aStr[0].slice( 0, i % (len + 1) )}~~${aStr[0].slice(i % (len + 1), len)} ${aStr[1]}`, level ) ); } }33:[{"id":"e1a7fbca8bb9f574f270a54437cf0344627eb89409f1a834fd38dea260f765419c2b71e8bf12d8ac1ab4f4ea7af8f5f57d3bfcfe3dfc30eb8d1d25a844ebc0b4","href":"https://static.observableusercontent.com/files/e1a7fbca8bb9f574f270a54437cf0344627eb89409f1a834fd38dea260f765419c2b71e8bf12d8ac1ab4f4ea7af8f5f57d3bfcfe3dfc30eb8d1d25a844ebc0b4","name":"Capture@1.JPG","type":"image/jpeg","lastModified":1669227927035.18,"size":36614}] 2d:{"title":"Using Google Sheets as a Proxy Server Workaround for Cross-Origin Resource Sharing (CORS) Restrictions","cells":[{"id":0,"value":"# Using Google Sheets as a Proxy Server Workaround for [Cross-Origin Resource Sharing (CORS) Restrictions](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"$${yield* progressivelyStrike([\"Data\",\" 👎\"],1,2)} \n\n","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"Using a [sample csv](https://github.com/datablist/sample-csv-files) file found on GitHub, the following cell illustrates the CORS restriction, with an attempted fetch on :\n\n > https://github.com/datablist/sample-csv-files/raw/main/files/organizations/organizations-100.csv","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"fetch(\n \"https://github.com/datablist/sample-csv-files/raw/main/files/organizations/organizations-100.csv\"\n).then((response) => response.text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"## The Proxy Google Sheet 👍\nThe following [embedded Google Sheet](https://support.google.com/docs/answer/183965) hosts the [sample csv data](https://github.com/datablist/sample-csv-files/raw/main/files/organizations/organizations-100.csv) that was unsuccessfully fetched. \n\nIt is referenced in the notebook via an [***iframe***](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) solely for illustration and its embedding is not required for utilizing it as the data's proxy.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":162,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"## Publish Google Sheet to the Web with the *Comma-separated values (.csv)* Option\nThe final step in setting up the 'data proxy' is to [publish the data sheet and obtain a fetchable url](https://sites.google.com/a/ccpsnet.net/googletraining/faq/FAQ-Drive/how-do-i-publish-a-sheet-to-the-web-and-what-does-that-mean); selecting the *Comma-separated values (.csv)* as the publish option. (Related Notebook: [Importing data from Google Spreadsheets into a notebook / webpage](https://observablehq.com/@bryangingechen/importing-data-from-google-spreadsheets-into-a-notebook-we))\n\nFor this notebook's scenario, the following url was generated when publishing the Google Sheet; note the ***output=csv*** attribute at the end of the url:","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"googleProxyURL = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQODu_Au-Ynem_QBlyWNXxzyvQF5KuS7MpNUG-11lcH-vYJgF72Ks5Z5xswuyymooiJhqVRxD_HxByI/pub?gid=0&single=true&output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"## Proxy Fetch and Parse 📊","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"Using *googleProxyURL* the proxied data is fetched and placed into an array via [d3.csvParse](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvParse):","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"dataFromGoogleSheet = fetch(googleProxyURL)\n .then((response) => response.text())\n .then((text) => d3.csvParse(text))","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":" A subset of the data retrieved is plotted:","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"Plot.plot({\n marks: [\n Plot.barY(dataFromGoogleSheet.slice(0, 7), {\n x: \"Country\",\n y: \"Number of employees\",\n fill: \"blue\"\n })\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}