如何在Netlify函数中调用Next.js API端点并支持传递不同邮件列表ID

问题原因 #

1. 服务端发起HTTP请求不能用相对路径，必须指定完整的绝对URL，Netlify函数运行环境无法解析相对路径对应的站点域名。
2. 你的handler是async异步函数，但没有等待axios异步请求完成就结束了函数执行，Lambda执行环境会直接销毁进程，导致请求未发出。
3. 你的helloworld函数最后没有返回任何符合Netlify函数规范的响应对象，所以才会返回无效的状态码0。
4. toast.success是前端浏览器端的API，服务端运行环境不存在这个方法，会触发未定义错误。
5. 现有mailingList.js写死了邮件列表ID，无法接收你传递的listid参数。

第一步：修改pages/api/mailingList.js，支持接收自定义列表ID #

const axios = require('axios');
 
export default async function handler(req, res) {
  if (req.method === "PUT") {
    axios
      .put(
        "https://api.sendgrid.com/v3/marketing/contacts",
        {
          contacts: [{ email: `${req.query.mail}` }],
          // 优先使用传递的listid，没有则用环境变量的默认值
          list_ids: [req.query.listid || process.env.SENDGRID_MAILING_LIST_ID],
        },
        {
          headers: {
            "content-type": "application/json",
            Authorization: `Bearer ${process.env.SENDGRID_API_KEY}`,
          },
        }
      )
      .then((result) => {
        res.status(200).send({
          message: "Your email has been successfully added to the mailing list. Welcome 👋",
        });
      })
      .catch((err) => {
        res.status(500).send({
          message: "Oups, there was a problem with your subscription, please try again or contact us",
        });
        console.error(err);
      });
  }
}

第二步：修改Netlify函数helloworld.js，正确调用API #

const axios = require('axios');

exports.handler = async function(event, context) {
  // 站点域名配置到环境变量，生产填你的Netlify站点域名，本地开发填http://localhost:8888
  const siteUrl = process.env.SITE_URL;
  const mail = "helloworld@gmail.com";

  try {
    // 多次调用示例，可根据你的业务逻辑调整参数
    const requestList = [
      axios.put(`${siteUrl}/api/mailingList?mail=${mail}&listid=xxx1`),
      axios.put(`${siteUrl}/api/mailingList?mail=${mail}&listid=xxx2`)
    ]
    // 等待所有请求完成
    const allResult = await Promise.all(requestList);

    // 返回符合规范的响应
    return {
      statusCode: 200,
      body: JSON.stringify({
        message: "操作完成",
        result: allResult.map(item => item.data)
      })
    }
  } catch (err) {
    console.error('调用出错', err);
    return {
      statusCode: 500,
      body: JSON.stringify({
        message: "操作失败",
        error: err.message
      })
    }
  }
}

注意事项 #

• 你需要在Netlify后台的环境变量配置中添加SITE_URL，值为你的站点完整域名，比如https://xxx.netlify.app，本地开发时配置为http://localhost:8888（Netlify Dev的默认端口）。
• 所有异步操作必须等待执行完成后再返回函数响应，避免被Lambda环境提前销毁进程。
• 可根据你的业务逻辑调整多次调用的参数，传递不同的mail和listid即可。

内容的提问来源于stack exchange，提问作者Fjott