Vite self signed certificate error when calling local API

Question

I created a simple Vue3 app, and I'm trying to call another local API (on a different port) on my machine. To better replicate the production server environment, I'm making a call to a relative API path. That means I need to use a proxy on the vite server to forward the API request to the correct localhost port for my local development. I defined my vite proxy like this in my vite.config.ts file:

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import basicSsl from '@vitejs/plugin-basic-ssl'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    basicSsl(),
    vue()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    https: true,
    proxy: {
      '/api': {
        target: 'https://localhost:44326', // The API is running locally via IIS on this port
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // The local API has a slightly different path
      }
    }
  }
});

I'm successfully calling my API from the Vue app, but I get this error in the command line where I'm running the vite server:

5:15:14 PM [vite] http proxy error:
Error: self signed certificate
    at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34) 
    at TLSSocket.emit (node:events:526:28)
    at TLSSocket._finishInit (node:_tls_wrap:944:8)       
    at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12)

I already tried to add the basic ssl package, and I don't particularly want to install the other NPM package that is in the top voted answer. Why does the vite server complain about a self signed certificate when I'm trying to call another API on my local machine? What can I do to fix this?

Answer 1

you could try secure: false

  server: {
    https: true,
    proxy: {
      '/api': {
        target: 'https://localhost:44326', // The API is running locally via IIS on this port
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '') // The local API has a slightly different path
      }
    }
  }

the set of full options is available at https://github.com/http-party/node-http-proxy#options

Options

httpProxy.createProxyServer supports the following options:

• target: url string to be parsed with the url module

• forward: url string to be parsed with the url module

• agent: object to be passed to http(s).request (see Node's https agent and http agent objects)

• ssl: object to be passed to https.createServer()

• ws: true/false, if you want to proxy websockets

• xfwd: true/false, adds x-forward headers

• secure: true/false, if you want to verify the SSL Certs

• toProxy: true/false, passes the absolute URL as the path (useful for proxying to proxies)

• prependPath: true/false, Default: true - specify whether you want to prepend the target's path to the proxy path

• ignorePath: true/false, Default: false - specify whether you want to ignore the proxy path of the incoming request (note: you will have to append / manually if required).

• localAddress: Local interface string to bind for outgoing connections

• changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL

• preserveHeaderKeyCase: true/false, Default: false - specify whether you want to keep letter case of response header key

• auth: Basic authentication i.e. 'user:password' to compute an Authorization header.

• hostRewrite: rewrites the location hostname on (201/301/302/307/308) redirects.

• autoRewrite: rewrites the location host/port on (201/301/302/307/308) redirects based on requested host/port. Default: false.

• protocolRewrite: rewrites the location protocol on (201/301/302/307/308) redirects to 'http' or 'https'. Default: null.

• cookieDomainRewrite: rewrites domain of set-cookie headers. Possible values:

  • false (default): disable cookie rewriting
  • String: new domain, for example cookieDomainRewrite: "new.domain". To remove the domain, use cookieDomainRewrite: "".
  • Object: mapping of domains to new domains, use "*" to match all domains. For example keep one domain unchanged, rewrite one domain and remove other domains:

    cookieDomainRewrite: {
      "unchanged.domain": "unchanged.domain",
      "old.domain": "new.domain",
      "*": ""
    }
    

• cookiePathRewrite: rewrites path of set-cookie headers. Possible values:

  • false (default): disable cookie rewriting
  • String: new path, for example cookiePathRewrite: "/newPath/". To remove the path, use cookiePathRewrite: "". To set path to root use cookiePathRewrite: "/".
  • Object: mapping of paths to new paths, use "*" to match all paths. For example, to keep one path unchanged, rewrite one path and remove other paths:

    cookiePathRewrite: {
      "/unchanged.path/": "/unchanged.path/",
      "/old.path/": "/new.path/",
      "*": ""
    }
    

• headers: object with extra headers to be added to target requests.

• proxyTimeout: timeout (in millis) for outgoing proxy requests

• timeout: timeout (in millis) for incoming requests

• followRedirects: true/false, Default: false - specify whether you want to follow redirects

• selfHandleResponse true/false, if set to true, none of the webOutgoing passes are called and it's your responsibility to appropriately return the response by listening and acting on the proxyRes event

• buffer: stream of data to send as the request body. Maybe you have some middleware that consumes the request stream before proxying it on e.g. If you read the body of a request into a field called 'req.rawbody' you could restream this field in the buffer option:

  'use strict';
  
  const streamify = require('stream-array');
  const HttpProxy = require('http-proxy');
  const proxy = new HttpProxy();
  
  module.exports = (req, res, next) => {
  
    proxy.web(req, res, {
      target: 'http://localhost:4003/',
      buffer: streamify(req.rawBody)
    }, next);
  
  };