如何正确配置我的Cloudflare Worker以将我发送的对象保存在Cloudflare的KV (存储)中？

Question

我正在尝试将我博客上的一篇新文章作为JS对象保存到Cloudflare的KV中。

我编写了这段Cloudflare的工作代码来响应“POST”方法。

const setCache = (key, data) => name_data.put(key, data)
const getCache = key => name_data.get(key)

async function Create(request) {
  const body = await request.text()
  const dataKey = `posts`
  const headers = {
    Allow: 'OPTIONS, GET, HEAD, POST',
    'Access-Control-Allow-Origin': '*',
    'Content-type': 'application/json',
  }
  try {
    // JSON.parse(body)
    await setData(dataKey, body)
    return new Response(body, { status: 200, headers: headers })
  } catch (err) {
    return new Response(err, { status: 500, headers: headers })
  }
}

export default Create

以下是来自我的前端的fetch请求：

  const onSavePostClicked = async () => {
    if (canSave) {
      const data = { title, content, author, id: nanoid() };

      fetch('https://serverless-api.mySpace.workers.dev/api/add', {
        method: 'POST',
        headers: {
          // 'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })
        .then((response) => response)
        .then((data) => {
          console.log('Success:', data);
          setTitle('');
          setContent('');
          setAuthor('');
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }
  };

我的Cloudflare命名空间/KV中的数组‘post’中没有添加任何内容。我认为这与数据的类型有关。我不得不使用这个：

const body = await request.text()

因为我不知道如何处理印前检查请求。

当我点击保存时，这是我在我的Chrome的控制台中得到的。

POST https://serverless-api.name.workers.dev/api/add 500

这是我在Cloudflare的工作日志中得到的：

"outcome": "ok",
  "scriptName": null,
  "exceptions": [],
  "logs": [],
  "eventTimestamp": 1637022226250,
  "event": {
    "request": {
      "url": "https://serverless-api.name.workers.dev/api/add",
      "method": "POST",
      "headers": {
        "accept": "*/*",
        "accept-encoding": "gzip",
        "accept-language": "en-US",
        "cf-connecting-ip": "",
        "cf-ipcountry": "US",
        "cf-ray": "",
        "cf-visitor": "{\"scheme\":\"https\"}",
        "connection": "Keep-Alive",
        "content-length": "87",
        "content-type": "text/plain;charset=UTF-8",
        "host": "serverless-api.name.workers.dev",
        "origin": "http://localhost:3000",
        "referer": "http://localhost:3000/",
        "sec-ch-ua": "\"Google Chrome\";v=\"95\", \"Chromium\";v=\"95\", \";Not A Brand\";v=\"99\"",
        "sec-ch-ua-mobile": "?0",
        "sec-ch-ua-platform": "\"macOS\"",
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "cross-site",
        "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36",
        "x-forwarded-proto": "https",
        "x-real-ip": ""
      },
      "cf": {
        "longitude": "",
        "latitude": "",
        "tlsCipher": "",
        "continent": "NA",
        "asn": 7922,
        "clientAcceptEncoding": "gzip, deflate, br",
        "country": "US",
        "tlsClientAuth": {
          "certIssuerDNLegacy": "",
          "certIssuerSKI": "",
          "certSubjectDNRFC2253": "",
          "certSubjectDNLegacy": "",
          "certFingerprintSHA256": "",
          "certNotBefore": "",
          "certSKI": "",
          "certSerial": "",
          "certIssuerDN": "",
          "certVerified": "NONE",
          "certNotAfter": "",
          "certSubjectDN": "",
          "certPresented": "0",
          "certRevoked": "0",
          "certIssuerSerial": "",
          "certIssuerDNRFC2253": "",
          "certFingerprintSHA1": ""
        },
        "tlsVersion": "TLSv1.3",
        "edgeRequestKeepAliveStatus": 1,
        "requestPriority": "",
        "httpProtocol": "HTTP/3",

      }
    }
  },
  "id": 0
}

Answer 1

您保存KV数据的方法是使用名称setCache定义的，但是在您的处理程序中，您尝试调用setData似乎是问题所在？

此外，对于印前检查请求，应该只是在发出传入的OPTIONS请求(返回正确的CORS标头)时提前返回/跳过保存。