0

所以我开始用 cloudflare pages 和 workers 弄脏我的手

我的想法是

  1. 获得一个域mydomain.com（完成）
  2. 制作静态站点@github myaccount.github.io（完成）
  3. 制作一个 cloudflare 页面页面，将 CNAME 添加到 DNS ZONE（完成），这样myaccount.github.io可以@ my-official-site.com（完成）
  4. 做一个 cloudflare 工作者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: *

但同样...

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

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

谢谢您的帮助。

4

2 回答 2

1

在 Cloudflare 文档的顶部，它指出

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

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

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

在旁注中，我建议更新您的问题标题以反映所问的内容。

于 2022-02-08T13:55:56.960 回答
0

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

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

无论如何，在工人中肯定有几个 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
}

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

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) )
}
于 2022-02-11T01:54:59.497 回答