npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@particular./micro-cors-http-proxy

v1.1.8

Published

Please contact Particular. via [email protected] for any questions

Downloads

1

Readme

@particular./micro-cors-http-proxy

npm version semantic-release code style: prettier CircleCI dependency status: david

🎮 Minimal HTTP Proxy implementation to support secure whitelisting and CORS

Built with Micro! 🤩

🛠 Setup

Create a .env at the project root with the following credentials:

PROXY_ORIGIN_WHITELIST=*.mysite.com,*.mycrmplaform.io,*.mycommerceplaform.com,*.now.sh
PROXY_DESTINATION_WHITELIST=api.mygateway.com,api.myshippingplatform.com,api.mycommerceplaform.com,*.whatever.net

PROXY_ORIGIN_WHITELIST is a comma separated list of patterns to match against the incoming requests 'Origin' header (ex. localhost,*.myawesomesite.com,*.now.sh)

PROXY_DESTINATION_WHITELIST is a comma separated list of patterns to match against the URI you are proxying requests to. (ex. api.somethingsecure.com,*.somotherapi.com)

Optional Additional Parameters const proxyReplacePrefix = process.env.PROXYREPLACE || 'PROXY_REPLACE' const proxyReplaceMatchPrefix = process.env.PROXY_REPLACE_MATCH || 'setting'

PROXY_PREFIX=proxy
PROXY_REPLACE_MATCH=setting
PROXY_REPLACE=PROXY_REPLACE_

PROXY_PREFIX will default to 'proxy' and is used in the URI patterns to determine where to find the encoded uri to proxy request to (ie. https://12345678.ngrok.io/<<<PROXY_PREFIX>>>/https%3A%2F%2Fapi.somethingsecure.com%2Fadmin%2Fcustomers.json)

PROXY_REPLACE_MATCH will default to 'setting' and used within HTTP_HEADERS sent to the proxy to support Mustache like syntax {{<<PROXY_REPLACE_MATCH>>.something_secure}} to replace something_secure with a value found in your process.env (preceeded by your PROXY_REPLACE prefix)

PROXY_REPLACE will default to 'PROXY_REPLACE_' and is the prefix used to look for other keys in your process.env that it will then use to override matched HTTP_HEADER values with

Example

PROXY_REPLACE_MATCH=setting
PROXY_REPLACE=PROXY_REPLACE_
PROXY_REPLACE_SOMETHING_SECURE=1XXXXXxxxxxXXXXXxxxxxXXXXXxxxxx1

Which will then take something like the following HTTP_HEADER sent to the proxy:

{ 'X-Shopify-Access-Token', '{{setting.something_secure}}' }

And before the request is proxied to the destination will inject your process.env value to send along in the proxied request:

{ 'X-Shopify-Access-Token', '1XXXXXxxxxxXXXXXxxxxxXXXXXxxxxx1' }

📦 Package

Run the following command to build the app

yarn install

Start the development server

yarn dev

The server will typically start on PORT 3000. If not, you'll need to restart ngrok to point to whatever server port you've started here.

⛽️ Usage

To send requests to the proxy, the calling implementation should use encodeURIComponent to encode the portion of the URI after the PROXY_PREFIX.

Once your server is up and running, you can send GET, DELETE, OPTIONS, PATCH, PUT and POST requests to it, ensuring that you are URIencoding the value after your PROXY_PREFIX. (ex. https://<<<NGROK_URL>>>/<<<PROXY_PREFIX>>>/https%3A%2F%2Fapi.somewheresecure.com%2Fsomemethod)

Sample call using jQuery.get() below:

const sampleEndpoint = `https://12345678.ngrok.io/proxy/${encodeURIComponent(
  'https://23456789.myshopify.com/admin/customers.json'
)}`

$.ajax({
  url: sampleEndpoint,
  type: 'GET',
  cors: true,
  beforeSend: xhr => {
    xhr.setRequestHeader(
      'X-Shopify-Access-Token',
      '{{setting.something_secure}}'
    )
  }
})
  .done(console.log)
  .fail(console.error)

🚀 Deploy

You can easily deploy this function to now.

Contact Adam Grohs @ Particular. for any questions.