31:[] 2f:{"title":"CORS-Anywhere - for Observables","cells":[{"id":0,"value":"md`# CORS-Anywhere - for Observables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`Slightly modified CORS Anywhere server for Observable usage.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"html`\n\n

\n\n $\"Deploy\"$ \n\n

\n 👈🏽👈🏽 Click to create your own CORS Anywhere server! 👈🏽👈🏽\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"Plot.plot({\n caption: `2020 Women's Single Tennis rankings, from the ITTF API`,\n marks: [\n Plot.barX(data, Plot.groupY({x: \"sum\"}, {x: \"Points\", y: \"Assoc\", sort: {y: \"x\", reverse: true, limit: 10}})),\n Plot.ruleX([0])\n ],\n marginLeft: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"corsWarning","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`\n## Problem\n\nSometimes, in Observable Notebooks, an API you're trying to access won't have CORS enabled, or you'll have problems with http/https. \n\nFor example, if I want to get a list of all live buses in the LA Metro system, I could try to call their API with:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"// lol, so this USED to not work, but it looks like api.metro.net upgraded\n// and enabled CORS. Before, this call would error out, and not return any data!\nd3.csv('https://ranking.ittf.com/public/s/ranking/csv?category=SEN&typeGender=W%3BSINGLES&year=2020&week=14') // ✖️","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`\nOuchie. Take a look further, you'll get an error message:\n\n

No 'Access-Control-Allow-Origin' header is present on the requested resource

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`Normally, to overcome this, you'd append the [demo CORS Anywhere server](https://cors-anywhere.herokuapp.com/)\nand go your merry way:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"d3.csv(\n 'https://cors-anywhere.herokuapp.com/https://ranking.ittf.com/public/s/ranking/csv?category=SEN&typeGender=W%3BSINGLES&year=2020&week=14'\n) // 🆗","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`\nHowever, that is a demo server - intended only for dev purposes. You'll get rate-limited after a while, so \nif you anticipate heavy traffic on your notebook, this won't work. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`\n## Solution\n\nHead over to the [CORS Anywhere Observable repo](https://github.com/asg017/cors-anywhere-observable), \nfollow the instructions, and easily make your own CORS Anywhere server specifically for all of your Observable Notebooks!\n\nHere is an example, with my server that I named \\`asg017-cors\\`:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"data = d3.csv('https://asg017-cors.herokuapp.com/https://ranking.ittf.com/public/s/ranking/csv?category=SEN&typeGender=W%3BSINGLES&year=2020&week=14', d3.autoType) // ✔️","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`\n## Instructions\n\n0. Have a heroku account\n1. Click on the Deploy button above.\n2. Name your app, add this to the \\`CORSANYWHERE_WHITELIST\\` config var: \n\\`https://YOUR_OBSERVABLE_USERNAME.static.observableusercontent.com\\`\n3. Deploy and you're all set!\n\nVisit the [GitHub repo](https://github.com/asg017/cors-anywhere-observable/) for more in-depth instructions, advantages/disadvantages, and the code itself!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"signOff()","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {corsWarning, signOff} from '@asg017/toolbox'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}