如何使用 mailchimp API 消除 CORS 错误？答案

【问题标题】：How to get rid of CORS error with mailchimp API?如何使用 mailchimp API 消除 CORS 错误？
【发布时间】：2022-07-05 13:11:54
【问题描述】：

如何使用 mailchimp API 处理 CORS 错误？
或者这段代码有什么问题：

这是使用 mailchimp 包：

import mailchimp from '@mailchimp/mailchimp_marketing'

 mailchimp.setConfig({
      apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
      server: process.env.NEXT_PUBLIC_MAILCHIMP_DC,
});
try {
   const response = await mailchimp.lists.addListMember(process.env.NEXT_PUBLIC_MAILCHIMP_LIST_ID, {
        email_address: email,
        status: "pending",
   });
catch(err){}

这是使用 axios

const url = `https://${process.env.NEXT_PUBLIC_MAILCHIMP_DC}.api.mailchimp.com/3.0/lists/${process.env.NEXT_PUBLIC_MAILCHIMP_LIST_ID}/members`;

const { data } = await axios.post(url, providedData, {
        headers: {
          Authorization: `auth ${process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY}`,
        },
});

但是遇到了同样的问题！

【问题讨论】：

看着这个展开，因为我有同样的问题。 OP，你找到方法了吗？
你说得对，我必须添加答案
我现在加了，你可以看看

标签： reactjs next.js cors mailchimp mailchimp-api-v3

【解决方案1】：

我通过从 nextJS 服务器端调用 Mailchimp API 解决了这个问题
您所要做的就是转到 pages/api

并添加一条带有以下代码的路由作为示例（取决于您的需要）：

import mailchimp from '@mailchimp/mailchimp_marketing';

async function handler(req, res) {
  const {email_address, status, merge_fields} = req.body

  mailchimp.setConfig({
    apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
    server: process.env.NEXT_PUBLIC_MAILCHIMP_DC,
  });

  try {
    await mailchimp.lists.addListMember(
      process.env.NEXT_PUBLIC_MAILCHIMP_LIST_ID,
      {
        email_address,
        status,
        merge_fields
      }
    );
  } catch (err) {
    return res.status(400).send({ error: true })
  }


  return res.json({ success: true });
}

然后转到您的客户端并获取此 API，如下所示：

const res = await fetch('/api/signup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email_address: email,
          status: 'subscribed',
          merge_fields: {
            FNAME: name,
          },
        }),
  });

就是这样

【讨论】：

谢谢，这也对我有用！我意识到没有这个，mailchimp 服务器期望的预检响应在发出请求后永远不会被发回。终于更有意义了

【解决方案2】：

您的回答帮助了@Almo。谢谢:)

我想添加一些东西但不能。缺少的一个修复是您忘记导出 api 组件。例如export default async (req, res) => { 或命名函数export default async function handler(req, res) {

【讨论】：