在飞行前响应中，访问控制允许标头不允许请求头字段哨位跟踪。

Question

我正在开发一个前端，使用NextJS和Keycloak作为专用工具。在添加Sentry之后，我将在这里面临这个问题，在这里，Keycloak的token端点将返回一个错误；因此我可以登录。

我尝试过很多事情：

• 更改Keycloak的web源文件配置，它(显然)不会改变或解决问题。
• 使用Sentry客户端配置，但没有成功，因为denyUrls属性仍然使Sentry SDK将sentry-trace发送到请求中。

现在我没有任何想法了，所以我来这里寻求更多的帮助。

Answer 1

因此，经过一些调查，我发现了一个tracingOrigins属性，它可以使用如下的集成来设置：

integrations: [
    new (Sentry.Integrations as any).BrowserTracing({
        tracingOrigins: [
            process.env.NEXT_PUBLIC_URL,
            process.env.NEXT_PUBLIC_BACKEND_URL,
            process.env.NEXT_PUBLIC_MATOMO_URL,
        ],
    }),
],

此配置在sentry.client.config.ts文件中完成。缺点是，不包含在其中的urls根本不被跟踪。

Answer 2

不幸的是，Keycloak有硬编码的允许报头列表，所以您不能为sentry-trace头配置密钥披风。

你可以有一些非理想的工作：

• 不要用哨兵
• 编译自己的已黑密钥披风版本，其中允许报头。
• 在密钥披风前面添加反向代理，这将向允许的头部添加sentry-trace头
• ..。

Answer 3

通过在静态源地图响应中添加以下头，解决了nextJs应用程序上的这个问题。'Access-Control-Allow-Headers' on next.config.js

const CONFIG = {
  headers: () => [
    {
      source: "/_next/:path*",
      headers: [
        { key: "Access-Control-Allow-Origin", value: SHOP_ORIGIN },
        { key: 'Access-Control-Allow-Headers', value: '*' },
      ],
    },
  ],
}