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

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

要添加自定义标题，例如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 Dev 工具测试您的端点，您将看到响应标头。