浏览器警告:响应不应包括不必要的标题

Question

为什么我在vercel中会收到这么多关于我的标题响应的警告？

​

​

即使我已经配置了一个vercel.json：

{
  "headers": [
    {
      "source": "/service-worker.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=5000"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Content-Security-Policy",
          "value": "img-src'self'data:;style-src'self''unsafe-inline'https://fonts.googleapis.com;"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/:path*",
      "has": [
        {
          "type": "query",
          "key": "authorized"
        }
      ],
      "headers": [
        {
          "key": "x-authorized",
          "value": "true"
        }
      ]
    }
  ]
}

在我的next.config.json里也是：

/** @type {import('next').NextConfig} */
const ContentSecurityPolicy = `
  img-src 'self' data:;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
`
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
]
module.exports = {
  images: {
    domains: ['images.unsplash.com'],
  },
  async redirects() {
    return [
      {
        source: '/blog',
        destination: '/blog/1',
        permanent: true,
      },
    ]
  },
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: '/:path*',
        headers: securityHeaders,
      },
    ]
  },
}

当我从本地类型记录服务器开始时，响应头是：

Cache-Control: public, max-age=0, must-revalidate
Connection: keep-alive
Content-Security-Policy: img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
Date: Thu, 26 May 2022 15:42:53 GMT
ETag: FVMg9GQVqCuvQmRih6yrB1CQBfXdxg9lp6KxSNfFGfI=
Keep-Alive: timeout=5
Vary: Accept
X-Content-Type-Options: nosniff

但在vercel上：

accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: public, max-age=315360000
content-disposition: inline; filename="photo-1544568100-847a948585b9.webp"
content-length: 7748
content-security-policy: script-src 'none'; frame-src 'none'; sandbox;
content-type: image/webp
cross-origin-resource-policy: cross-origin
date: Thu, 26 May 2022 15:17:12 GMT
last-modified: Thu, 26 May 2022 15:17:12 GMT
server: Vercel
vary: Accept
x-matched-path: /_next/image
x-vercel-cache: MISS
x-vercel-id: gru1::mc5kz-1653578231971-8f317b0ed988

我的github公共项目：https://github.com/florescente/NEXT-NOW

Vercel似乎忽略了我的配置，但我不知道为什么。

Answer 1

“响应不应包括不必要的标题:内容-安全-策略”或任何其他图像标题问题的解决方案：

next.config.js：

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    contentSecurityPolicy: ``,
  },
}

请参阅https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg中的更多内容