Flutter Web本地HTTPS配置失败，寻求解决方法

一、完整配置流程 #

1. 证书准备（你已完成，可直接复用） #

• 生成私钥：openssl genrsa -out localhost.key 2048
• 生成证书签名请求：

  openssl req -new -key localhost.key -out localhost.csr -subj "/CN=localhost"
  

• 生成自签名证书：

  openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt
  

• 将localhost.key和localhost.crt放入项目根目录下的cert文件夹（.csr文件可忽略）

2. 启动HTTPS服务 #

直接执行以下Flutter命令，无需额外配置文件：

flutter run -d web-server --web-port 8444 --web-certificate=cert/localhost.crt --web-key=cert/localhost.key

启动后，服务将运行在https://localhost:8444，手动在浏览器访问即可。

3. 处理浏览器安全警告 #

自签名证书不被浏览器信任，需手动确认：

• Chrome/Edge：点击页面「高级」→「继续前往localhost（不安全）」
• Firefox：点击「高级」→「接受风险并继续」

二、你之前操作的问题说明 #

• --web-launch-url参数仅指定启动后打开的URL，但未配置HTTPS证书，Flutter默认仍使用HTTP协议，因此报错该地址不是有效HTTP URL。
• serve.json仅用于静态资源路径映射，不支持HTTPS配置，无法通过该文件启用HTTPS。
• webdev serve配置无效：若坚持使用webdev，需确保webdev.yaml配置正确，且先编译Flutter Web产物，但Flutter官方更推荐直接使用Flutter命令启动服务，配置更简单。正确的webdev.yaml配置如下：

  serve:
    https:
      certificate: cert/localhost.crt
      key: cert/localhost.key
    port: 8444
  

  执行webdev serve --release即可，但需提前运行flutter build web生成产物。

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