cloudflare 可以添加自定义标头吗？

Question

有什么方法可以在 cloudflare 中添加自定义标头吗？

我们有一些 https ajax 来缓存静态文件， 但它不处理响应标头中的“Access-Control-Allow-Credentials”之类的标头并导致 chrome 失败。

Answer 1

Scott Helme 发布了一种使用最近发布的新 Cloudflare Workers 的方法。

https://scotthelme.co.uk/security-headers-cloudflare-worker/

let securityHeaders = {
  "Content-Security-Policy": "upgrade-insecure-requests",
  "Strict-Transport-Security": "max-age=1000",
  "X-Xss-Protection": "1; mode=block",
  "X-Frame-Options": "DENY",
  "X-Content-Type-Options": "nosniff",
  "Referrer-Policy": "strict-origin-when-cross-origin",
}

let sanitiseHeaders = {
  "Server": "My New Server Header!!!",
}

let removeHeaders = [
  "Public-Key-Pins",
  "X-Powered-By",
  "X-AspNet-Version",
]

addEventListener('fetch', event => {
  event.respondWith(addHeaders(event.request))
})

async function addHeaders(req) {
  let response = await fetch(req)
  let newHdrs = new Headers(response.headers)

  if (newHdrs.has("Content-Type") && !newHdrs.get("Content-Type").includes("text/html")) {
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHdrs
    })
  }

  Object.keys(securityHeaders).map(function(name, index) {
    newHdrs.set(name, securityHeaders[name]);
  })

  Object.keys(sanitiseHeaders).map(function(name, index) {
    newHdrs.set(name, sanitiseHeaders[name]);
  })

  removeHeaders.forEach(function(name) {
    newHdrs.delete(name)
  })

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHdrs
  })
}

Answer 2

要添加自定义标头，请在 Cloudflare 中选择

Workers

。

要添加自定义标头，例如

Access-Control-Allow-Credentials

或

X-Frame-Options

然后添加以下小脚本：-

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  let response = await fetch(request)
  let newHeaders = new Headers(response.headers)
  newHeaders.set("Access-Control-Allow-Credentials", "true")
  newHeaders.set("X-Frame-Options", "SAMEORIGIN")
  
  // ... and any more required headers

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  })
}

一旦你创建了你的工人，你需要将它匹配到一条路线，例如

如果您现在使用例如测试您的端点Chrome 开发工具，您将看到响应标头。

Answer 3

2023 年，也可以在 CloudFlare 控制台中添加标头：

https://developers.cloudflare.com/rules/transform/request-header-modification/create-dashboard/

Answer 4

cloudflare 不支持这种可能性