How to use an api behind vouch proxy during SPA development from localhost

[Choo57]

hi friends, quick question if anyone has any experience with this.

We are building a single page app (SPA) that will communicate with an api behind vouch proxy. The finished SPA will run on the same domain as the API so no issues once it is deployed.

During development though, we spin up a local webserver to test the SPA and it runs it on http://localhost:8080. We have the API running on https://demo.mydomain.com/api behind vouch proxy.

Any recommendations to enable the SPA connect to the api during development? API has all the required CORS headers, just could not figure out how vouch proxy can let a request from http://localhost access the protected api so we can streamline development (e.g. would whitelisting by IP work given the totally different domains, protocols etc? or if we can add localhost to vouch_domains and somehow after logging in, can vouch cookie work on multiple domains, with on being on http and the other on https?!).

Other alternative for us would be to set up a locally running api and connect to it during development.

[bnfinet]

@Choo57 welcome back!

You could create a DNS record (or an entry in /etc/hosts) for 127.0.0.1 localhost.mydomain.com and then test from https://localhost.mydomain.com. You may need to do some wrangling of certs (letsencrypt) for the local webserver.

[Choo57]

hi @bnfinet thanks again for the fast response and for the guidance!

got it working as you mentioned, sharing some details in case it might help someone else.

• added "127.0.0.1 localhost.mydomain.com" to /etc/hosts, so when I type https://localhost.mydomain.com to the browser, I can lunch the SPA wihen the dev server is running.
• to prevent https certificate errors on the browser, installed a self signed certificate using mkcert:
  mkcert "*.mydomain.com" {my_internal_ip} localhost 127.0.0.1
• we are using Vue, so added the following to the vue.config.js file created in the root directory of the project, where certificates point to the ones created by mkcert:

const fs = require("fs");

module.exports = {
  devServer: {
    disableHostCheck: true,
    port: 443,
    https: {
      key: fs.readFileSync("../certificates/hosts-key.pem"),
      cert: fs.readFileSync("../certificates/host.pem")
    }
  }
};

• added "https://localhost.mydomain.com" to allowed_origins on the backend
• did not need to add any CORS headers to NGINX
• Sending fetch requests from the Vue app with the credentials property to make sure Vouch cookie gets attached to the request:
  fetch(url, {method: 'GET', credentials: 'include'})

Thanks again, really appreciate all your time and assistance!