使用 webpack-dev-server 代理到 SSL 端点的代理

Question

我正在尝试在 vue3 中执行 axios GET 请求：

vue.config.js

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

Request.js

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

发送请求时出现以下错误： 400（错误请求）

400（错误请求） 的来源是缺少 SSL 证书，我在浏览器中被要求提供在没有代理的情况下访问 https://example-url.com/example/.../（导致 CORS 策略错误）。

为什么在通过代理访问 api 时没有要求我提供客户端证书？

如何配置要求我提供客户端证书的请求？

Answer 1

在 webPack dev Server Proxy 中附加 SSL 证书的解决方案

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,
   }
  }
 }
})

请求URL然后需要去例如http://localhost:8080/api

使用 webpack-dev-server 代理到 SSL 端点的代理

Proxy to SSL Endpoint with webpack-dev-server proxy

ssl

https

proxy

http

vue.js