标签: cloudflare-workers

我有一个指向 GitBook 的虚荣 URL。GitBook 不支持插入任意 JavaScript 片段。目前 GitBook 只有 4 个“集成”。

我可以通过我自己的 VM 服务器来完成此操作，但我有 CloudFlare，并且我想尝试工作人员。（Javascript 在 CDN 边缘运行）。

CloudFlare工作环境使标头注入变得非常容易，但没有明显的方法来做到这一点。

我只是用 Hugo 创建的静态站点测试 Workers 站点。它已经存在，因此我使用 docs\xe2\x80\x99 说明来调整现有站点。和文件cache-control的标题全部显示为，与我基于https://support.cloudflare.com/hc/en-us/articles/200172516#h_a01982d4-d5b6-4744-bb9b-的预期相反a71da62c160a。有问题的工人网站是https://hosts-test-hugo.brycewray.workers.dev/。woff2cssno-cache

我在https://levelup.gitconnected.com/use-cloudflare-javascript-workers-to-deploy-you-static- generated-site-ssg-1c518e078646 找到了以下内容，但不知道它是否相关:

\n

Cloudflare Worker 是一段 JavaScript 代码，每次您访问由 Cloudflare 代理的网站上的特定路由时都会运行。该代码会在每个请求 到达 Cloudflare\xe2\x80\x99s 缓存之前执行。这意味着工作器响应不会被缓存（尽管工作器向其他 Web 服务发出的请求可能会使用适当的缓存标头进行缓存）。

\n

该站点是否需要有一个自定义域 \xe2\x80\x94 即，而不是 \xe2\x80\x9c.workers.dev\xe2\x80\x9d URL \xe2\x80\x94 才能进行正常缓存行为？这还有关系吗？

[注：我在此发布此内容是因为我在Cloudflare 社区论坛或Cloudflare subreddit \xe2\x80 \x94 上均未能成功获得响应，希望在这里能获得更好的结果。]

我看到很多文章在 Cloudflare 工作人员中设置环境变量。但我无法在 node.js 代码中读取或检索它：

async function handleRequest(request) {
  if ('OKOK' == process.env.API_KEY) {
    return new Response('found', {
      headers: { 'content-type': 'text/plain' },
    })
  }
}

牧马人.toml

name = "hello"
type = "javascript"

# account_id = ""
workers_dev = true
[env.production]
name = "API_KEY"

我目前有两个在 cloudflare 中使用以下 CNAME 设置的 Web 应用程序。两者都是 keystonejs 应用程序。

app1.example.com ===pointing to ===> AWS ALB 1
app2.example.com ===pointing to ===> AWS ALB 2

我已设置 Cloudflare Enterprise，因此我可以在页面规则中使用“渲染覆盖”功能。我使用以下内容设置了 2 个页面规则：

www.example.com ===render override ===> app1.example.com
www.example.com/app2/* ===render override ===> app2.example.com

现在为了访问 app2.example.com 上的 keystonejs 应用程序。使用 app2.example.com/pa 调用该应用程序

我面临的问题是渲染覆盖不允许我使用子路径，并且我不想使用转发规则。我是否需要通过根 URL（即 app2.example.com/ ）访问我的 keystone 应用程序？或者还有其他方法可以做到这一点吗？否则，我需要使用反向代理吗？比如nginx？谢谢

我正在尝试使用 cloudfare 工作人员在将响应发送到客户端之前将 2 个 cookie 键/值对添加到响应中。

不幸的是，cloudflare 工作人员的所有文档都说使用 response.headers.set('Set-Cookie',xxx) 函数来设置 cookie 值：

let response = await fetch(request);
response = new Response(response.body, response);

response.headers.set('Set-Cookie', "val1=x; Expires=Wed, 21 Oct 2020 07:28:00 GMT; Path='/';");

return response;

这仅允许您设置一个 cookie 标头，如果调用两次只会覆盖现有的标头。

我试过两次调用该函数，只有最后一个值进来：

response.headers.set('Set-Cookie', "val1=1; Expires=Wed, 21 Oct 2020 07:28:00 GMT; Path='/';");
response.headers.set('Set-Cookie', "val2=2; Expires=Wed, 21 Oct 2020 07:28:00 GMT; Path='/';");

我尝试在一个标题中传递 2 个 cookie，用逗号分隔，但只有一个进来：

response.headers.set('Set-Cookie', "val1=1; Expires=Wed, 21 Oct 2020 07:28:00 GMT; Path='/';, val2=2; Expires=Wed, 21 Oct 2020 07:28:00 GMT; Path='/';");

我尝试传递 2 个 …

Cloudflare 自己的全球分布式数据存储 \xe2\x80\x93 Workers KV \xe2\x80\x93可以接受三种“类型”的数据：string、ArrayBuffer和ReadableStream。

虽然前两者的用例足够清楚，但我正在努力弄清楚存储如何ReadableStream有用。我熟悉这个概念：使用它，您可以随着时间的推移“流式传输”不同的值，但是将其放入数据存储中有何意义？典型场景有哪些？

我使用 CF Workers 创建了一个 SendGrid 表单并设置（用于测试）Access-Control-Allow-Origin", '*' 但它在前端被忽略：

Access to XMLHttpRequest at 'https://<domain>.workers.dev/' from origin 'https://<frontend-domain>.dev' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我是否还需要将其添加到 AXIOSPOST请求中？

这是我的工人文件中的代码：

const myHeaders = new Headers();
  myHeaders.set("Access-Control-Allow-Origin", '*');
  myHeaders.set("Access-Control-Allow-Methods", "GET,HEAD,POST,OPTIONS");
  myHeaders.set("Access-Control-Max-Age", "86400",);
  return new Response((emailResponse.ok), {status: 200, headers: myHeaders}) 

这是 AXIOS 请求：

this.$axios.$post(
  "https://<domain>.workers.dev/",
  {
    name: this.mailData.name,
    eMail: this.mailData.eMail,
    phone: this.mailData.phone,
    message: this.mailData.message,
  },
  {
    headers: …

我刚刚在这个简单的工人身上花了一整天的时间，但我一无所获。

我已经关注了 CloudFlare 网站上的 Cache API 示例，也浏览了 StackOverflow 的帖子，但仍然一无所获。

这篇文章（Cloudflares Worker Cache API 的问题）看起来正是我所需要的，但它没有帮助。

本质上，我想做的就是使用缓存 API 将某些页面缓存一段时间。我最终需要根据国家/地区代码执行特定的缓存（这就是为什么我使用工作程序而不是页面规则），但现在我要做的就是让基本缓存 API 作为测试工作。

这是代码，它与他们网站上的示例代码基本相同

处理程序.ts

export async function handleRequest(event: FetchEvent): Promise<Response> {
  const { request } = event
  const cacheUrl = new URL(request.url)
  const cacheKey = new Request(cacheUrl.toString(), request)
  const cache = caches.default

  let response = await cache.match(cacheKey)
  if (!response) {
    console.log('NO CACHE MATCH')
    // If not in cache, get it from origin
    response = await fetch(request)
    // Must use Response constructor …

我设置了一个 Cloudflare Worker 来重定向到我们的 API 网关，因为我们无法控制 DNS，也不能只设置 CNAME。重定向有效，它会传递正文和除授权之外的所有标头。它收到它，当我查看工作控制台时，它会将其列为已编辑。它还编辑了我传递的 user_key 参数，但它传递了它。

const base = 'https://myurl.com'
const statusCode = 308;

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

async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname, search } = url;

  const destinationURL = base + pathname + search;

  return Response.redirect(destinationURL, statusCode);
}

我在 Cloudflare Workers 上有一个 Javascript 边缘函数。它唯一做的就是检查特定标头并返回包含相应值的 JSON

请参阅下面的代码

async function handleRequest(request) {

  const url = new URL(request.url);

  const psk_db = await KV_STORAGE.get(request.headers.get(PRESHARED_AUTH_HEADER_KEY));


  if (psk_db === null) {
    return new Response("Access denied", { status: 404 });
  }
  else{
    //calculate number

    //return JSON
    const data = {
      pswd: psk_db,
    };

    json = JSON.stringify(data, null, 2);
  }

  return new Response(json, {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': url.origin,
      },
    })

}



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

现在，该函数在 cloudflare 测试环境中运行良好，但是当我尝试使用运行此 javascript 函数的按钮从 html 页面请求时 …