2f:Ta77, function fetchcors(request){ const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS", "Access-Control-Max-Age": "86400", } const API_URL = "https://gist.githubusercontent.com/xprilion/33cc85952d317644c944274ee6071547/raw/300db56b3b4cc2d5f99d7dde9b4274ac433fef12/iris.json" // The endpoint you want the CORS reverse proxy to be on const PROXY_ENDPOINT = "/corsproxy/"; // The rest of this snippet for the demo page function rawHtmlResponse(html) { return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); } let reqs = {}; reqs.noproxy = () => { return fetch("${API_URL}").then(r => r.json()) } reqs.proxy = async () => { let href = "${PROXY_ENDPOINT}?apiurl=${API_URL}" return fetch(window.location.origin + href).then(r => r.json()) } reqs.proxypreflight = async () => { let href = "${PROXY_ENDPOINT}?apiurl=${API_URL}" let response = await fetch(window.location.origin + href, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ msg: "Hello world!" }) }) return response.json() } (async () => { for (const [reqName, req] of Object.entries(reqs)) { try { let data = await req() document.getElementById(reqName).innerHTML = JSON.stringify(data) } catch (e) { document.getElementById(reqName).innerHTML = e } } })() async function handleRequest(request) { const url = new URL(request.url); let apiUrl = url.searchParams.get("apiurl"); if (apiUrl == null) { apiUrl = API_URL; } // Rewrite request to point to API URL. This also makes the request mutable // so you can add the correct Origin header to make the API server think // that this request is not cross-site. request = new Request(apiUrl, request); request.headers.set("Origin", new URL(apiUrl).origin); let response = await fetch(request); // Recreate the response so you can modify the headers response = new Response(response.body, response); // Set CORS headers response.headers.set("Access-Control-Allow-Origin", url.origin); // Append to/Add Vary header so browser will cache response correctly response.headers.append("Vary", "Origin"); return response; } } 30:T14a7, function cors3(request){ console.log("request1",request) //async fetch(request) { const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS", "Access-Control-Max-Age": "86400", } console.log("corsHeaders",corsHeaders) // The URL for the remote third party API you want to fetch from // but does not implement CORS const API_URL = "https://gist.githubusercontent.com/xprilion/33cc85952d317644c944274ee6071547/raw/300db56b3b4cc2d5f99d7dde9b4274ac433fef12/iris.json"//"https://examples.cloudflareworkers.com/demos/demoapi"; // The endpoint you want the CORS reverse proxy to be on const PROXY_ENDPOINT = "/corsproxy/"; // The rest of this snippet for the demo page function rawHtmlResponse(html) { return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); } const DEMO_PAGE = `

API GET without CORS Proxy

Shows TypeError: Failed to fetch since CORS is misconfigured

Waiting

API GET with CORS Proxy

Waiting

API POST with CORS Proxy + Preflight

Waiting `; async function handleRequest(request) { console.log("request2",request) const url = new URL(request.url); let apiUrl = url.searchParams.get("apiurl"); if (apiUrl == null) { apiUrl = API_URL; } // Rewrite request to point to API URL. This also makes the request mutable // so you can add the correct Origin header to make the API server think // that this request is not cross-site. request = new Request(apiUrl, request); console.log("request new",request) request.headers.set("Origin", new URL(apiUrl).origin); let response = await fetch(request); // Recreate the response so you can modify the headers response = new Response(response.body, response); // Set CORS headers response.headers.set("Access-Control-Allow-Origin", url.origin); // Append to/Add Vary header so browser will cache response correctly response.headers.append("Vary", "Origin"); return response; } async function handleOptions(request) { console.log("handleOptions",request) if ( request.headers.get("Origin") !== null && request.headers.get("Access-Control-Request-Method") !== null && request.headers.get("Access-Control-Request-Headers") !== null ) { // Handle CORS preflight requests. return new Response(null, { headers: { ...corsHeaders, "Access-Control-Allow-Headers": request.headers.get( "Access-Control-Request-Headers", ), }, }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { Allow: "GET, HEAD, POST, OPTIONS", }, }); } } const url = new URL(request); console.log(" const url = new URL(request);",url,request) if (url.pathname.startsWith(PROXY_ENDPOINT)) { if (request.method === "OPTIONS") { // Handle CORS preflight requests return handleOptions(request); } else if ( request.method === "GET" || request.method === "HEAD" || request.method === "POST" ) { // Handle requests to the API server return handleRequest(request); } else { return new Response(null, { status: 405, statusText: "Method Not Allowed", }); } } else { console.log(" else demo",rawHtmlResponse(DEMO_PAGE)) return rawHtmlResponse(DEMO_PAGE); } }31:[] 2d:{"title":"23andme","cells":[{"id":0,"value":"# 23andme","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":" allUsers2 = allUsers()","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"cors = 'https://corsproxy.io/?'//","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"url = cors + 'url=https://opensnp.org/users.json'","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// get all users with genotype data (23andMe, illumina, ancestry etc)\nallUsers = async function () { \n const db = 'userDB';\n //let dt = await localforage.getItem('usersFull'); // check for users in localstorage\n let dt = null\n if (dt == null) {\n let url = cors + 'url=https://opensnp.org/users.json'\n dt = (await(await (await fetch(url)))).json()//.sort((a, b) => a.id - b.id)\n userDB.setItem('usersFull', dt)\n }\n return dt\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"localforage = require('localforage')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"userDB = localforage.createInstance({\n name: \"userDB\",\n storeName: \"userDB\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"cors2 = require('cors')","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"jsonurl = \"https://gist.githubusercontent.com/xprilion/33cc85952d317644c944274ee6071547/raw/300db56b3b4cc2d5f99d7dde9b4274ac433fef12/iris.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"cors3(jsonurl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"async function handleRequest(request){\n const response = await fetch(request)\n console.log(\"response\",response)\n const modifiedResponse = new Response(response.body, response)\n\n modifiedResponse.headers.set('Access-Control-Allow-Origin', '*')\n modifiedResponse.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')\n modifiedResponse.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')\n modifiedResponse.headers.set('Access-Control-Max-Age', '86400')\n console.log(\"modifiedResponse\",modifiedResponse)\n\n return modifiedResponse\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"iris = handleRequest(jsonurl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"addEventListener('fetch', event => {\n event.respondWith(handleRequest(event.request));\n});","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}