0

我正在使用 html 表单来收集电子邮件或其他文本，并使用 Netlify 函数将它们发送到 Notion 数据库（这样密钥就不会暴露）。

我按照本教程中的几个步骤操作：https : //css-tricks.com/collecting-email-signups-with-the-notion-api/（我没有遵循上述指南中的 mailgun 流程）

它在本地主机上工作，但我无法在已部署的版本上提交表单。

刚刚检查了控制台并抛出了这个错误：

(index):66 POST https://lucid-rosalind-9dba9d.netlify.app/.netlify/functions/index 502
registerUser @ (index):66
onclick @ (index):25

实时部署版本：https ://lucid-rosalind-9dba9d.netlify.app/

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion + Netlify Functions Newsletter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<body>
    <div class="container py-5">
        <p>
            Get daily tips related to Jamstack in your inbox.
        </p>

        <div id="form" class="row">
            <div class="col-sm-8">
                <input name="email" type="email" class="form-control" placeholder="Your email" autocomplete="off">
                <div id="feedback-box" class="invalid-feedback">
                    Please enter a valid email
                </div>
            </div>
            <div class="col-sm-4">
                <button class="btn btn-primary w-100" type="button" onclick="registerUser()">Submit form</button>
            </div>
        </div>

        <div id="success-box" class="alert alert-success d-none">
            Thanks for subscribing to our newsletter.
        </div>
        <div id="error-box" class="alert alert-danger d-none">
            There was some problem adding your email.
        </div>
    </div>
</body>

<script>
    function validateEmail(email) {
        const re =
            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    async function registerUser() {
        const form = document.getElementById('form');
        const successBox = document.getElementById('success-box');
        const errorBox = document.getElementById('error-box');
        const feedbackBox = document.getElementById('feedback-box');
        const email = document.getElementsByName('email')[0].value;

        if (!validateEmail(email)) {
            feedbackBox.classList.add('d-block');
            return;
        }

        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        
        const options = {
            method: 'POST',
            headers,
            body: JSON.stringify({email}),
        };

        const response = await fetch('/.netlify/functions/index', options);

        if (response.ok) {
            form.classList.add('d-none');
            successBox.classList.remove('d-none');
        }
        else {
            form.classList.add('d-none');
            errorBox.classList.remove('d-none');
        }
    }
</script>
</html>

index.js

const { Client, LogLevel } = require('@notionhq/client');

const { NOTION_API_TOKEN, NOTION_DATABASE_ID } = process.env;

async function addEmail(email) {
  // initialize notion client
  const notion = new Client({
    auth: NOTION_API_TOKEN,
    logLevel: LogLevel.DEBUG,
  });

  await notion.pages.create({
    parent: {
      database_id: NOTION_DATABASE_ID,
    },
    properties: {
      Email: {
        title: [
          {
            text: {
              content: email,
            },
          },
        ],
      },
    },
  });
}

function validateEmail(email) {
  const re =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

module.exports.handler = async function (event, context) {
  // check the request method
  if (event.httpMethod != 'POST') {
    return { statusCode: 405, body: 'Method not Allowed' };
  }

  // get the body
  try {
    var body = JSON.parse(event.body);
  } catch (err) {
    return {
      statusCode: 400,
      body: err.toString(),
    };
    return;
  }

  // validate the email
  const { email } = body;
  if (!validateEmail(email)) {
    return { statusCode: 400, body: 'Email is not valid' };
  }

  // store email in notion
  await addEmail(email);
  return { statusCode: 200, body: 'ok' };
};

使用 github 部署到 netlify

在此处输入图像描述

我不想使用 Netlify 表单。

4

0 回答 0