Cors-bypass NPM

cors-bypass

Bypass the browsers CORS restrictions, without needing to setup a server-side proxy. Demo

Allows you to make HTTP requests from a HTTPS page
100% coverage for the WebSocket API spec

How does this module work?

It uses postMessage to send cross-domain events, which is used to provide mock HTTP APIs (fetch, WebSocket, XMLHTTPRequest etc.). Simplified version

How do I use it

Theres three components to this module: the Server, Adapter and Client.

Server

Simply serve a HTML file on a domain from which you want to make requests from (HTTP domain for example), with the following (use a bundler like Webpack, Parcel etc):

import { Server } from 'cors-bypass'

const server = new Server()

<body>
  <script src="./node_modules/cors-bypass/lib/server.bundle.js"></script>
</body>

Adapter

Next you need a HTML file from the domain that will make requests (your web app's domain). The adapter is in control of forwarding requests from a client located on any page of your site, to the server (using a BroadcastChannel).

import { Adapter } from 'cors-bypass'
const adapter = new Adapter()

<body>
  <script src="./node_modules/cors-bypass/lib/adapter.bundle.js"></script>
</body>

Client

As long as the Adapter is running in a different tab (on the same domain as the client), you will be able to make requests.

// Located somewhere on https://your-site.com
import * as BypassCors from 'cors-bypass'

const client = new BypassCors.Client()

await client.getServer() // null - no server connected yet
await client.openServerInNewTab({
  serverUrl: 'http://random-domain.com/server.html',
  adapterUrl: 'https://your-site.com/adapter.html'
})
await client.getServer() // { id: 123, url: 'http://random-domain.com/server.html' }

// Create a WebSocket (websocket is loaded in the server tab, but it's API is available on this page)
const ws = new BypassCors.WebSocket('ws://echo.websocket.org')
ws.onopen = () => ws.send('hello')
ws.onmessage = ({ data }) => console.log('received', data)