使用 https 运行 sveltekit dev

Question

在开发环境中是否可以使用 https 运行 SvelteKit 应用程序？\n我尝试运行

\n

npm run dev -- --https  \n

\n

vite启动服务器成功：

\n

VITE v3.0.2  ready in 359 ms\n\n  \xe2\x9e\x9c  Local:   https://localhost:5173/\n  \xe2\x9e\x9c  Network: [...] \n

\n

但我无法连接到 https://localhost:5173\nchrome 说：ERR_SSL_VERSION_OR_CIPHER_MISMATCH

\n

我还尝试编辑 vite.config.js 添加我的证书：

\n

https: {\n    key: readFileSync( `${__dirname}/../server/key.pem`),\n    cert: readFileSync(`${__dirname}/../server/cert.pem`),\n}\n

\n

我还尝试在这篇文章之后使用 mkcert() ：

\n

在本地主机上访问 https

\n

但它会导致同样的错误

\n

然后我尝试使用 mkcert 作为插件：

\n

const config = {\n    \n    server: {       \n        https: true\n    },\n\n    plugins: [sveltekit(), mkcert()],\n\n}; \n

\n

这次，在第一次加载时，它似乎可以工作，但是使用 SvelteKit goto() 加载其他页面会导致以下不同的错误：

\n

TypeError [ERR_HTTP2_INVALID_CONNECTION_HEADERS]: HTTP/1 Connection specific headers are forbidden: "keep-alive"\n

\n

Answer 1

证书部分

\n

openssl在这里，为了简单起见，我建议您使用 mkcert，但您也可以使用...生成证书

\n

安装mkcert

\n

brew install mkcert\n

\n

安装本地证书颁发机构

\n

> mkcert -install\nCreated a new local CA \nThe local CA is now installed in the system trust store! \xe2\x9a\xa1\xef\xb8\x8f\nThe local CA is now installed in the Firefox trust store (requires browser restart)! \n

\n

创建您的证书mkcert

\n

mkdir your_project/cert\ncd your_project/cert\nmkcert -key-file key.pem -cert-file cert.pem localhost\n

\n

视频部分

\n

更新vite.config.js以包含您的证书文件

\n

import { sveltekit } from \'@sveltejs/kit/vite\';\nimport { defineConfig } from \'vite\';\nimport fs from \'fs\';\n\nexport default defineConfig({\n    plugins: [sveltekit()],\n    server: {\n        https: {\n            key: fs.readFileSync(`${__dirname}/cert/key.pem`),\n            cert: fs.readFileSync(`${__dirname}/cert/cert.pem`)\n        }\n    }\n});\n

\n

import { sveltekit } from \'@sveltejs/kit/vite\';\nimport { defineConfig } from \'vite\';\nimport fs from \'fs\';\n\nexport default defineConfig({\n    plugins: [sveltekit()],\n    server: {\n        https: {\n            key: fs.readFileSync(`${__dirname}/../cert/key.pem`),\n            cert: fs.readFileSync(`${__dirname}/../cert/cert.pem`)\n        },\n        proxy: {}\n    }\n});\n

\n

那么你应该运行并在终端中pnpm run dev查看。Local: https://localhost:5173/

\n

Answer 2

我注意到在 vite.config.js 中添加： proxy: {} 解决了这个问题，但我没有完全理解为什么以及这个选择的后果

const config = {
    
    server: {       
        https: true,
        proxy: {} <==
    },

    plugins: [sveltekit(), mkcert()],

};