During development, sometimes its necessary to run a local environment with HTTPS to test an API. This happened today to me, I was running a local React application on http:localhost/3000 and the backend api was giving me CORS errors. This was because the protocols did not match with my Fronend React App and my backed API>

To fix it:

  1. Install vite-plugin-mkcert
    $ npm i vite-plugin-mkcert -D
  2. Open file vite.config.js
  3. Add the following
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import mkcert from 'vite-plugin-mkcert'
    // https://stackoverflow.com/a/71618444
    // https://vitejs.dev/config/
    export default defineConfig({
      server: { https: true },
      plugins: [react(),mkcert()],
      base: '/'
    })
  4. Start the server
    $ npm run dev