Remix+Prisma应用中如何阻止Chrome DevTools的404请求？

问题背景 #

你的Remix应用服务器端出现的404错误，是Chrome DevTools自动发起的请求——它尝试访问/.well-known/appspecific/com.chrome.devtools.json来检测是否存在自定义调试配置，这个请求本身不影响应用功能，但会产生冗余日志。以下是几种阻止该404日志的方案：

方案1：通过Remix中间件拦截（推荐，适配你的v2.15.3版本） #

Remix v2.8+支持全局中间件，直接在app/middleware.ts中添加拦截逻辑：

import { createMiddleware } from "@remix-run/node";

export default createMiddleware(async (request, next) => {
  const url = new URL(request.url);
  // 匹配DevTools的请求路径
  if (url.pathname === "/.well-known/appspecific/com.chrome.devtools.json") {
    // 返回204状态码，告知浏览器无需内容，避免404日志
    return new Response(null, { status: 204 });
  }
  // 其他请求正常处理
  return next(request);
});

方案2：创建匹配路由返回空响应 #

在app/routes目录下创建路由文件$.well-known.appspecific.com.chrome.devtools.json.tsx（用$前缀适配Remix文件路由规则），内容如下：

import type { LoaderFunctionArgs } from "@remix-run/node";

export async function loader({ request }: LoaderFunctionArgs) {
  return new Response(null, { status: 204 });
}

当DevTools发起请求时，会匹配到该路由，返回204状态码，不会触发404错误。

方案3：自定义服务器拦截请求 #

如果你使用自定义服务器（如Express），可以在请求到达Remix处理器前拦截路径：

import { createRequestHandler } from "@remix-run/express";
import express from "express";

const app = express();

// 拦截目标请求
app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
  res.sendStatus(204);
});

// 挂载Remix请求处理器
app.all("*", createRequestHandler({
  build: require("./build"),
}));

app.listen(3000, () => console.log("服务器运行在端口3000"));

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