Brave浏览器中React文件上传致Swagger/API崩溃的修复方案咨询

问题概述 #

开发了基于ASP.NET Core Web API的简易文件上传测试功能，启动时自动打开Swagger文档标签页和React应用标签页。在Brave浏览器中，当在React应用的文件输入框选择文件时，会触发Swagger标签页甚至整个浏览器崩溃，进而导致API停止运行。文件选择功能本身正常，无视觉异常，React应用和浏览器日志也未报错。将两个标签页拆分到独立窗口或切换到Edge浏览器时，问题完全消失。

可能原因 #

• Brave的Shields隐私防护对同一窗口内的localhost跨标签请求做了过度拦截或资源占用，引发进程崩溃
• Brave的内存管理机制在同一窗口下对两个localhost标签页的资源共享处理存在异常
• Swagger UI的实时刷新/WebSocket连接与React的文件读取操作在同一窗口下产生资源冲突

修复方案 #

1. 调整Brave Shields局部设置 #

• 点击Brave地址栏右侧的狮子图标（Shields开关）
• 将Trackers & ads blocking改为Standard或直接针对localhost禁用
• 把Fingerprinting protection从Strict模式切换为Standard
• 刷新两个标签页后重新测试文件上传

2. 关闭Brave内存节省模式 #

• 打开Brave设置 → 系统 → 内存节省
• 关闭"启用内存节省模式"选项
• 重启浏览器后再测试场景

3. 修改Swagger启动配置，避免自动同窗口打开 #

在ASP.NET Core的Program.cs中，修改SwaggerUI的配置，移除自动打开浏览器的逻辑，改为手动打开独立窗口：

app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "File Upload API V1");
    c.RoutePrefix = string.Empty;
    // 注释或删除自动打开浏览器的代码，比如：c.InjectJavascript("window.open('/')");
});

4. 优化React上传代码的资源处理 #

当前代码存在两处潜在问题，修正后可减少资源冲突概率：

• 按钮绑定的onSubmit无效（未在form内），应改为onClick
• 异步请求的链式调用未正确等待，finally块会提前执行

修正后的代码：

import { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const baseurl = "https://localhost:7010/api";
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(false);

  const changeFile = (event) => {
    const selectedFile = event.target.files?.[0];
    if (!selectedFile) return;
    setFile(selectedFile);
  };

  const handleUpload = async () => {
    if (!file) return;

    setLoading(true);
    try {
      // 获取上传凭证
      const tokenRes = await axios.post(`${baseurl}/files`, {
        talentId: "1",
        fileName: file.name,
      });
      // 上传文件到存储服务
      await axios.put(tokenRes.data.sasToken, file, {
        headers: {
          "Content-Type": file.type,
          "x-ms-blob-type": "BlockBlob",
        },
      });
      // 通知后端上传完成
      await axios.post(`${baseurl}/files/confirm`, {
        talentId: "1",
        fileName: file.name,
      });
    } catch (error) {
      console.error("上传失败:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <label>Upload pdf</label>
      <div>
        <input type="file" accept=".pdf" onChange={changeFile} />
        <button onClick={handleUpload} disabled={loading}>
          {loading ? "上传中..." : "上传"}
        </button>
      </div>
    </div>
  );
}

export default App;

5. 更新Brave到最新版本 #

打开Brave设置 → 关于Brave，检查并安装最新版本，新版本通常会修复此类进程崩溃的已知bug

验证步骤 #

1. 应用任意一种修复方案后，同时打开Swagger和React标签页在同一窗口
2. 在React应用中选择PDF文件并执行上传操作
3. 观察Swagger标签页是否正常运行，浏览器是否出现崩溃情况

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