beehiiv api 与自定义表单集成

Question

我的 Next.js 项目中有一个自定义表单模式，用户可以在其中输入他们的电子邮件地址来订阅新闻通讯。

我最近从 Mailchimp 切换到 Beehiiv，并希望当用户单击“订阅”按钮时直接进行订阅，而不重定向到另一个页面。

它还在控制台中给我一个 CORS 错误！

这是模态的代码：

请帮忙

import React, { useState } from 'react';

const ModalNews = ({ onClose }) => {
    const [email, setEmail] = useState('');
    const [status, setStatus] = useState('');

    const handleSubscribe = async () => {
        if (!email) {
            setStatus('Please enter a valid email address.');
            return;
        }

        try {
            const response = await fetch('https://api.beehiiv.com/v1/newsletter/subscribe', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer API KEY`, // Replace with your API key
                },
                body: JSON.stringify({ email }),
            });

            if (response.ok) {
                setStatus('Successfully subscribed! 🎉');
                setEmail(''); // Clear input
            } else {
                const errorData = await response.json();
                setStatus(`Error: ${errorData.message || 'Something went wrong'}`);
            }
        } catch (error) {
            setStatus('Failed to subscribe. Please try again later.');
        }
    };

    return (
        <div className="fixed inset-0 flex items-center justify-center z-50">
            {/* Overlay */}
            <div
                className="absolute inset-0 bg-black opacity-50"
                onClick={onClose}
            ></div>

            {/* Modal Content */}
            <div className="relative bg-PrimaryLime z-10 lg:w-[1095px] md:w-[700px] w-[330px] h-[500px] md:h-[380px] lg:h-[533px] py-[30px] md:py-[59px] md:px-[30px] px-[30px] lg:px-[59px] mx-[18px] overflow-hidden">
                <div className="flex md:flex-row-reverse flex-col justify-between md:items-start">
                    <div className="md:w-[50%] md:h-full flex-col justify-evenly">
                        <div className="h-[50%] flex-col justify-evenly">
                            <div className="lg:text-[56px] md:text-[30px] text-[30px] SemiBold mb-[20px] md:mb-[40px]">
                                Join the CoHo Community
                            </div>
                            <div className="lg:text-[25px] md:text-[20px] text-[16px] leading-[1.2]">
                                Get exclusive pre-access to our events, special offers and discounts, tips and tricks and much more!
                            </div>
                        </div>
                        <div className="lg:h-[180px] md:h-[80px] h-[70px] flex items-end mb-[20px] md:mb-0">
                            <div className="flex w-full">
                                <input
                                    type="email"
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    name="email"
                                    className="w-full mt-1 pb-2 border-b mr-[10px] border-black focus:outline-none bg-transparent placeholder-black placeholder:text-[13px] md:placeholder:text-[19px]"
                                    placeholder="Enter e-mail"
                                />
                                <button
                                    onClick={handleSubscribe}
                                    className="bg-PrimaryBlue md:text-[15px] text-[10px] px-[10px] pb-[7px] pt-[10px] md:w-[125px] md:h-[40px] md:pb-[12px] md:pt-[15px] md:px-[18px] flex justify-center items-center text-white SemiBold hover:bg-transparent hover:border-2 hover:border-black hover:text-black"
                                >
                                    SUBSCRIBE
                                </button>
                            </div>
                        </div>
                        {status && (
                            <div className="text-[14px] mt-2 text-red-600">{status}</div>
                        )}
                    </div>
                    <div className="lg:w-[49%] md:w-[40%] w-[63%] md:h-full h-[240px] lg:translate-x-[-65px] translate-x-[-30px]">
                        <img
                            className="lg:max-w-[474px] md:max-w-[330px] max-w-[244px]"
                            src="../assets/news.png"
                            alt="Newsletter"
                        />
                    </div>
                </div>
                <div className="absolute md:top-4 md:right-4 top-4 right-4">
                    <button
                        className="item-2 h-[30px] w-[30px]"
                        onClick={onClose}
                        aria-label="Close"
                    ></button>
                </div>
            </div>
        </div>
    );
};

export default ModalNews;

Answer 1

我找到了解决方案，你必须在后端创建api