CORS Proxy

Creating a CORS proxy server using testing/RunKit

Problem§
Implementation§
Testing & Usage§

Problem

jstestbefore> Response !error

return (async (fn) => {
  try {
    const resp = await fetch("https://example.com");
    console.log(resp.status);
    return resp.text();
  } catch (err) {
    return err.message;
  }
})();

ResponseerrorUpdated 138w ago

Origin https://dotlit.org is not allowed by Access-Control-Allow-Origin.

Implementation

jsrunkit-express-cors-proxy.jssource

const express = require("@runkit/runkit/express-endpoint/1.0.0");
const cors = require("cors");
const request = require("request");

const app = express(exports);
app.use(cors());
app.use("/", (req, res) => {
  try {
    req.pipe(request("https://" + req.url.slice(1))).pipe(res);
    //  res.end(req.url);
  } catch (err) {
    res.end(err.message);
  }
});

js../plugins/other/cors-proxy.jsplugincollapsetype=proxyid=corsProxy

export const proxy = async (returnEndpoint) => {
  const setup = (resolve, reject) => {
    if (typeof lit === "undefined") reject("No lit");
    else if (!window.__runkitCORSProxyEnpoint) {
      (async (fn) => {
        const rkEmbed = document.createElement("script");
        rkEmbed.onload = async (fn) => {
          const el = document.createElement("div");
          document.body.appendChild(el);
          el.setAttribute("style", "height:0;");
          RunKit.createNotebook({
            element: el,
            mode: "endpoint",
            onLoad: async (rk) => {
              const endpoint = await rk.getEndpointURL();
              window.__runkitCORSProxyEnpoint = endpoint;
              document.body.removeChild(el);
            },
            evaluateOnLoad: true,
            source: await lit.fs.readFile(
              "/testing/runkit-express-cors-proxy.js",
              {
                encoding: "utf8",
              }
            ),
          });
        };
        rkEmbed.setAttribute("src", "https://embed.runkit.com");
        document.body.appendChild(rkEmbed);
      })();
    } else {
      resolve(window.__runkitCORSProxyEnpoint);
    }
  };

  const endpoint = await new Promise(setup).then((e) => e);
  if (false && !window.__runkitCORSProxyEnpoint) {
    return "Still setting up proxy endpoint";
  } else {
    if (returnEndpoint) return endpoint;

    const getAndReplaceDomain = (originalUrl, newDomain) => {
      return newDomain + originalUrl.replace(/^https?:\/\//, "/");
    };

    const proxyFetch = async (url, opts = {}) => {
      const proxyUrl = getAndReplaceDomain(url, endpoint);
      return fetch(proxyUrl, opts);
    };

    return proxyFetch;
  }
};

Testing & Usage

jsgetendpoint

return (async (fn) => {
  const endpoint = await lit.file.data.plugins.proxy.corsProxy(true);
  return endpoint
})();

txtUpdated 137.9w ago

https://k3vlrljdnj9t.runkit.sh

jstestafter> text !collapse

return (async (fn) => {
  const fetch = await lit.file.data.plugins.proxy.corsProxy();
  const resp = await fetch('https://example.com')
  console.log(resp.status)
  return resp.text();
})();

textcollapseUpdated 137.9w ago

200
<!doctype html>
<html>
<head>
    <title>Example Domain</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>    
</head>

<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>

umlumlcollapserequires-cors-proxy> img repl-output.svg

@startmindmap
* root node
	* some first level node
		* second level node
		* another second level node
	* another first level node
@endmindmap

imgrepl-output.svgUpdated 138w ago

imginline< /testing/repl-output.svg

htmlbelow

<img src="/testing/repl-output.svg"/>

return lit.fs.readStat("/testing/repl-output.svg", "utf8");

return fetch('/testing/repl-output.svg')
       .then(res => res.headers.get('server'))

txtUpdated 139.0w ago

GitHub.com

return fetch('/testing/repl-output.svg')
       .then(res => res.headers.get('Content-Type'))

txtUpdated 139.0w ago

image/svg+xml

js> svg

return fetch('/testing/repl-output.svg')
       .then(res => res.text())

svgUpdated 138w ago

CORS Proxy

Table of Contents

Problem

Implementation

Testing & Usage

Backlinks (2)