Vite调用本地API时自签名证书错误

Question

我创建了一个简单的 Vue3 应用程序，并且尝试调用我的计算机上的另一个本地 API（在不同的端口上）。为了更好地复制生产服务器环境，我正在调用相对 API 路径。这意味着我需要在 vite 服务器上使用代理将 API 请求转发到正确的本地主机端口以进行本地开发。我在我的文件中定义了我的 vite 代理vite.config.ts：

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

我成功地从 Vue 应用程序调用我的 API，但在运行 vite 服务器的命令行中收到此错误：

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)

我已经尝试添加基本的 ssl 包，并且我并不特别想安装投票最高的答案中的其他 NPM 包。当我尝试调用本地计算机上的另一个 API 时，为什么 vite 服务器会抱怨自签名证书？我可以做什么来解决这个问题？

Answer 1

你可以尝试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
      }
    }
  }

完整选项集可在https://github.com/http-party/node-http-proxy#options上找到

选项

httpProxy.createProxyServer支持以下选项：

• target：要使用 url 模块解析的 url 字符串

• forward：要使用 url 模块解析的 url 字符串

• agent：要传递给 http(s).request 的对象（请参阅 Node 的https 代理和http 代理对象）

• ssl：要传递给 https.createServer() 的对象

• ws：true/false，如果你想代理 websockets

• xfwd：true/false，添加 x-forward 标头

• secure：true/false，如果您想验证 SSL 证书

• toProxy：true/false，传递绝对 URL 作为path（对于代理到代理很有用）

• prependPath：true/false，默认值：true - 指定是否要将目标路径添加到代理路径之前

• ignorePath： true/false，默认值： false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须手动附加 / ）。

• localAddress：用于绑定传出连接的本地接口字符串

• changeOrigin : true/false, 默认值: false - 将主机标头的来源更改为目标 URL

• keepHeaderKeyCase : true/false, 默认值: false - 指定是否要保留响应标头键的字母大小写

• auth：基本身份验证，即“用户：密码”来计算授权标头。

• hostRewrite：重写 (201/301/302/307/308) 重定向上的位置主机名。

• autoRewrite：根据请求的主机/端口重写 (201/301/302/307/308) 重定向上的位置主机/端口。默认值：假。

• protocolRewrite：将 (201/301/302/307/308) 重定向上的位置协议重写为“http”或“https”。默认值：空。

• cookieDomainRewrite：重写set-cookie标头的域。可能的值：

  • false（默认）：禁用 cookie 重写
  • 字符串：新域名，例如cookieDomainRewrite: "new.domain". 要删除域，请使用cookieDomainRewrite: "".
  • 对象：域到新域的映射，用于"*"匹配所有域。例如保持一个域不变，重写一个域并删除其他域：

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

• cookiePathRewrite：重写set-cookie标头的路径。可能的值：

  • false（默认）：禁用 cookie 重写
  • 字符串：新路径，例如cookiePathRewrite: "/newPath/"。要删除路径，请使用cookiePathRewrite: "". 要设置 root 使用路径cookiePathRewrite: "/"。
  • 对象：路径到新路径的映射，用于"*"匹配所有路径。例如，要保持一条路径不变，请重写一条路径并删除其他路径：

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

• headers：具有要添加到目标请求的额外标头的对象。

• proxyTimeout：传出代理请求的超时（以毫秒为单位）

• timeout：传入请求的超时（以毫秒为单位）

• followRedirects：true/false，默认值：false - 指定是否要遵循重定向

• selfHandleResponse true/false，如果设置为 true，则不会调用任何 webOutgoing 传递，并且您有责任通过侦听事件并采取行动来适当地返回proxyRes响应

• buffer：作为请求正文发送的数据流。也许您有一些中间件在代理请求流之前消耗它，例如，如果您将请求的正文读入名为“req.rawbody”的字段，您可以在缓冲区选项中重新流式传输该字段：

  '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);
  
  };