在 netlify 上使用带有 nuxt 的旋转门

Question

我正在尝试在 netlify 上将 turnstile 与 nuxt 一起使用。

当在本地主机上的服务器/api (nuxt) 中使用 Turnstile 时，它可以工作。

服务器/api 的

validateTurnstile.js 看起来像这样

export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    return await verifyTurnstileToken(body.token || body['cf-turnstile-response'])
  })

在 signup.vue 页面中，我们像这样验证令牌

  async validateToken() {
    let response; 
    try {
      response = await $fetch('api/validateTurnstile', {
        method: 'POST',
        body: {
          token: this.token,
        },
      });
    } catch (error) {
      console.error("Token validation error:", error);
      return false;
    }
    return response;
  },

但要使其工作，我必须在 netlify 中使用边缘函数？ 我尝试根据文档进行设置。将文件写入 netlify/edge-functions/validateTurnstile.js 时出现错误，提示找不到函数

边缘函数的

validateTurnstile.js应该看起来像这样？

exports.handler = async (event) => {
  try {
    const { token } = JSON.parse(event.body);
    // Your logic here, for example:
    const result = await verifyTurnstileToken(token);
    return {
      statusCode: 200,
      body: JSON.stringify(result),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
    };
  }
};

** 编辑 **

当使用 netlify Edge 函数（而不是 server/api ）时，我需要将 validateToken （来自 signup.vue）获取位置更改为

await $fetch('/validateTurnstile'...

，以便它可以获取令牌数据。

我尝试访问 url localhost:8888/validateTurnstile 以查看那里有什么，但出现此错误

{“errorType”：“错误”，“errorMessage”：“找不到函数 'validateTurnstile'","trace":["错误：找不到函数 '验证旋转门' 在 FunctionChain.getFunction （https://v2-8-1--edge.netlify.com/bootstrap/function_chain.ts:248:13） 在 FunctionChain.runFunction （https://v2-8-1--edge.netlify.com/bootstrap/function_chain.ts:353:23） 在 FunctionChain.run （https://v2-8-1--edge.netlify.com/bootstrap/function_chain.ts:323:31） 在处理请求时 （https://v2-8-1--edge.netlify.com/bootstrap/handler.ts:148:34） 在 https://v2-8-1--edge.netlify.com/bootstrap/server.ts:39:7 在 分机：deno_http/00_serve.ts:364:24 在 分机：deno_http/00_serve.ts:552:29 在 eventLoopTick 处 (分机:core/01_core.js:168:7)"]}

在开发者控制台中我收到此消息

signup.vue：279令牌验证错误：FetchError：[POST] “/validateTurnstile”：404 未找到 异步 $fetch22 (ofetch.00501375.mjs:261:15) 在异步 Proxy.validateToken (signup.vue:272:1) 在异步 Proxy.handleSubmit (signup.vue:289:1)

我的根文件结构如下所示：

Answer 1

我不确定你的用例，但我的功能之一看起来像这样

/netlify/edge-functions/context.ts

import type { Config, Context } from "@netlify/edge-functions";

export const config: Config = {
  path: "/netlify-edge",
};

export default async (request: Request, context: Context) => {
  console.log('Netlify context', context)

  return Response.json({
    context
  });
};

尝试也添加类似的

path

到您的。