Cloudflare 页面 - Cloudflare Workers答案

【问题标题】：Cloudflare Pages - Cloudflare WorkersCloudflare 页面 - Cloudflare Workers
【发布时间】：2022-04-17 16:15:22
【问题描述】：

所以我开始着手处理 cloudflare 页面和工作人员

我的想法是

获得域名mydomain.com（完成）
制作静态站点@github myaccount.github.io（完成）
制作一个 cloudflare 页面页面，将 CNAME 添加到 DNS ZONE（完成），因此 myaccount.github.io 可以是 @my-official-site.com（完成）
制作一个 cloudflare worker https://myworker.myclaccount.workers.dev（完成）

所以当我请求my-official-site.com 时，我得到myaccount.github.io 的内容

现在我想从我的myaccount.github.io 工作人员那里运行以获取一些 html 或 json 或....

我试图从我的myaccount.github.io (index.html) 获取

<script>
fetch('https://myworker.myclaccount.workers.dev')
  .then(response => response.json())
  .then(data => console.log(data));
</script>

我收到这样的请求给我的工人

const html = 
  "<p>This markup was generated by a Cloudflare Worker.</p>"

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

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

问题是

Access to fetch at 'https://myworker.myclaccount.workers.dev/' 
from origin 'my-official-site.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我创建了一个

_headers.txt (https://developers.cloudflare.com/pages/platform/headers) 位于我的 github“站点”的根目录中

/*
  Access-Control-Allow-Origin: *

但同样...

我是无服务器和 jamstack 的新手（我现在是 js、css、html），但对这个概念很陌生

知识（android、c#、php、wp、unity、一些node.js）

感谢您的帮助。

【问题讨论】：

标签： cors cloudflare cloudflare-workers jamstack cloudflare-pages

【解决方案1】：

在 Cloudflare 文档的顶部，它指出

_headers 文件中定义的自定义标头当前未应用于来自函数的响应

我相信这是您遇到的问题。您需要直接在工作函数中应用标头，如此处所述 -

https://developers.cloudflare.com/pages/how-to/add-custom-http-headers

附带说明，我建议您更新问题标题以反映所问的内容。

【讨论】：

【解决方案2】：

您似乎没有使用 Cloudflare Pages。这样的部署将在很大程度上取代您当前的 Github Pages + Cloudflare Workers 组合，并且您不会处理您展示的用例的跨站点请求。

即使您打算继续使用工作人员作为单独的增强工具，在您当前的设置中启用 CORS 也是没有意义的。 Worker 可以透明地安装在您域的任何路由上，因此即使真实服务器在半个星球之外，也可以将跨站点请求变成同源请求。

无论如何，在工人中肯定有几个 CORS 用例。举一个基本的例子，这里有一个简单的中间件，它接受Response 或一个promise，返回一个带有修改头的副本。（CORS 还有很多，但这超出了这个问题的范围）

/**
 * @param {Response|Promise<Response>} res
 * @returns {Promise<Response>}
 */
async function corsEnabler(res) {
   res = await res 
   const corsResponse = new Response(res.body, res)
   corsResponse.headers.set('Access-Control-Allow-Origin','*')
   corsResponse.headers.set('Access-Control-Allow-Methods','GET,POST,HEAD,OPTIONS')
   return corsResponse
}

（我正在等待 res，以防我通过了响应的承诺。但这并不意味着等待它的内容！）然后，您的代码在哪里

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

你会像这样使用中间件

addEventListener("fetch", event => {
   return event.respondWith(
        corsEnabler( handleRequest(event.request) )
   )
})

如果您使用module syntax，您将使用默认导出而不是 FetchEvent

export default {
  fetch(request, env, context) {
    return corsEnabler( handleRequest(request) )
  }
}

如果你使用了页面函数：

export async function onRequest(context) {
   return corsEnabler( handleRequest(context.request) )
}

【讨论】：

【解决方案3】：

您可以使用 Cloudflare Bulk Trasform 规则编辑响应标头，并将一个或多个特定的允许域添加到返回给客户端（在本例中为您的工作人员）的 CORS 标头字段。

免费计划用户最多可以设置 5 条规则，而在一条规则中您可以设置多个请求或响应标头。

【讨论】：