Cloudflare页面- Cloudflare Workers

Question

所以我开始用cloudflare页面和工作人员弄脏我的手

我的想法是

1. 获取域mydomain.com (已完成)
2. 创建一个静态站点@ github myaccount.github.io (已完成)
3. 制作一个cloudflare页面，将CNAME添加到DNS区域(完成)，以便myaccount.github.io可以是@ my-official-site.com (完成)
4. 制作一个cloudflare worker https://myworker.myclaccount.workers.dev (已完成)

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

现在，我想从我的myaccount.github.io，一个工人，得到一些html或json或.

1. 我试图从我的myaccount.github.io (index.html)中获取信息

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

1. 我向我的工人提出这样的要求

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: *

但同样的..。

我对无服务器和干扰堆栈(我现在是js，css，html)很陌生，但对这个概念来说是新的。

知识(安卓，c#，php，wp，统一，一些node.js)

谢谢你的帮助。

Answer 1

在Cloudflare文档的顶部，它声明

定义在_headers文件中的自定义头当前不应用于来自函数的响应。

我相信这就是你遇到的问题。您需要在worker函数中直接应用标头，如下所示-

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

另外，我建议更新您的问题标题，以反映正在提出的内容。

Answer 2

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

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

无论如何，在工人中肯定有几个用于CORS的用例。对于一个基本的例子，这里有一个简单的中间件，它接受一个Response或一个承诺，返回一个带有修改头的副本。( 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
}

)我在等她，万一我没有得到答复的承诺。但这并不意味着要等待它的内容！)然后，你的代码显示

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

您可以使用这样的中间件

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

如果使用的是模块语法，则使用默认导出而不是FetchEvent

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

如果您使用页面函数：

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

Answer 3

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

空闲计划用户最多可以设置5个规则，而在单个规则中，您可以设置多个请求或响应头。