在Next.js中通过middleware.ts设置Permissions-Policy头。

我为页面A 返回一个权限策略X，然后通过Next Link导航到页面B，页面B 拥有权限策略Y。

我在对页面B 的内部Next JSON props请求中看到返回了权限策略Y。

页面B 仍在使用权限策略A。

如果我完全重新加载页面B，它会按预期发送权限策略Y，此时浏览器也会正确使用它。

如何在不同页面之间动态更改Next.js的权限策略？

我能找到的唯一解决方案是使用带整页加载的锚点标签，这样并不好。

解决方案

你的选项之一是在中间件中全局设置（如果可能的话）

// middleware.ts
response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()')

或者

当策略发生变化时，你可以强制进行整页重新加载，以替代：

<Link href="/page-b">Page B</Link>

使用：

<a href="/page-b">Page B</a>

或者

<Link href="/page-b" onClick={(e) => {
  e.preventDefault()
  window.location.href = '/page-b'
}}>Page B</Link>