Laravel 9执行npm run dev时出现SSL版本/密码套件不匹配错误求助

问题根源 #

出现net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH错误的核心原因：Vite开发服务器默认会生成自签名临时证书，但你的Apache服务器使用的是Cloudflare颁发的绑定域名的正式证书，两者证书信息不匹配；同时你之前配置中直接使用IP而非域名，也会和Cloudflare证书绑定的域名不匹配，双重因素导致浏览器SSL连接验证失败。

解决方案 #

1. 修改Vite配置，复用Apache的SSL证书 #

更新vite.config.js的server配置，指定Cloudflare证书的路径，并将host替换为你的域名（而非IP）：

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        // 配置为你Apache使用的Cloudflare证书路径
        https: {
            key: '/etc/cloudflare/domain.com.key',
            cert: '/etc/cloudflare/domain.com.pem',
        },
        hmr: {
            host: "domain.com",
        },
        host: "domain.com",
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Https/Livewire/**',
            ],
        }),
    ],
});

2. 配置本地Hosts（本地开发场景） #

如果是在本地机器访问服务器，需要将域名指向服务器IP：

• Linux/macOS：编辑/etc/hosts，添加一行：

  你的服务器IP  domain.com www.domain.com
  

• Windows：编辑C:\Windows\System32\drivers\etc\hosts，添加上述内容

3. 更新Laravel环境变量 #

修改.env文件中的APP_URL为HTTPS域名：

APP_URL=https://domain.com

4. 重启相关服务 #

• 重启Apache：

  sudo systemctl restart apache2
  

• 停止当前运行的npm run dev，重新执行：

  npm run dev
  

验证 #

重新访问站点后，Vite开发服务器将使用与Apache一致的Cloudflare证书，浏览器可正常验证SSL连接，资源加载错误即可解决。

内容的提问来源于stack exchange，提问作者Andry Kritsun