在Next.js中间件中用TRPC动态设置frame-ancestors时遇报错求助

这个错误的核心问题出在你同时对请求头和响应头设置了Content-Security-Policy，加上代码里的冗余操作，导致后续逻辑重复发送响应头触发报错。结合你的需求，下面是具体的修复方案：

1. 删掉多余的请求头CSP设置 #

Content-Security-Policy是给客户端看的响应头，完全不需要在请求头里配置，直接删除这段代码：

requestHeaders.set(
  "Content-Security-Policy",
  contentSecurityPolicyHeaderValue,
);

2. 给TRPC调用加异常兜底 #

异步获取frameAncestors时，万一TRPC接口调用失败，得有个默认值兜底，避免中间件挂掉：

let frameAncestors = "'self'"; // 默认只允许自身嵌入
try {
  frameAncestors = await api.csp.getSources({ path: path });
} catch (err) {
  console.error("获取CSP嵌入源失败:", err);
}

3. 简化CSP头的生成 #

没必要用多行字符串再去替换空格，直接拼接更简洁：

const contentSecurityPolicyHeaderValue = `frame-ancestors ${frameAncestors};`;

4. 仅在响应头设置CSP #

只对NextResponse对象设置响应头，确保操作唯一：

修改后的完整代码 #

import { NextRequest, NextResponse } from "next/server";
import { api } from "./trpc/server";

export async function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;
  let frameAncestors = "'self'";

  try {
    frameAncestors = await api.csp.getSources({ path: path });
  } catch (err) {
    console.error("CSP嵌入源获取失败:", err);
  }

  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
  const contentSecurityPolicyHeaderValue = `frame-ancestors ${frameAncestors};`;

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-nonce", nonce);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  response.headers.set("Content-Security-Policy", contentSecurityPolicyHeaderValue);

  return response;
}

export const config = {
  matcher: "/some_path/:path*",
};

额外注意点 #

• 确保TRPC返回的frameAncestors是合法值，比如'self'、https://example.com、'none'等，不然CSP头会失效。
• 检查你的页面或API路由有没有单独设置CSP，避免和中间件的配置冲突，建议统一在中间件处理全局CSP。
• 测试时用浏览器「网络」面板看响应头，确认CSP是否正确，同时看控制台有没有CSP相关报错。

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