Proxy to SSL Endpoint with webpack-dev-server proxy

Question

I am trying to do an axios GET request in vue3:

vue.config.js

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: 'https://example-url.com/',
  }
})

Request.js

const url = "http://localhost:8080/example/.../"

When sending the request I am getting the following error: 400 (Bad Request)

The origin of the 400 (Bad Request) is a missing SSL certificate, which I am getting asked for in the browser when accessing https://example-url.com/example/.../ without the proxy (results in CORS policy error).

Why am I not getting asked for a client certificate when accessing the api via the proxy?

How can I configure my request that I am getting asked for a client certificate?

Answer 1

Solution for appending SSL Certifcate in webPack devServer Proxy

module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy: {
  '^/api': {
    target: {
      protocol: "https:",
      host: "base-url",   
      port: 443,
      pfx: fs.readFileSync('pfxFile.pfx'),
      passphrase: 'your-passphrase',     
    },
    changeOrigin: true,
   }
  }
 }
})

Request URL then needs to go to e.g. http://localhost:8080/api