Блог

Главная - Вопросы по программированию - next.js 404 не удается загрузить ресурс /api/ на vercel

next.js 404 не удается загрузить ресурс /api/ на vercel

#api #next.js #http-status-code-404 #vercel

Вопрос:

я создаю следующий веб-сайт js, который я разверну на vercel.

Я сделал next.js api /api/контакт, который отправляет почту через nodemailer. Это прекрасно работает, когда я пробую код на своем ПК, но когда я загружаю на vercel (с интеграцией с github), я получаю сообщение «404 не удалось загрузить ресурс» для /api/контакта в консоли, и оно не работает.

Есть ли еще какие-либо настройки для next.js api для работы с vercel ?

Вот код для вызова api :

 fetch("/api/contact", {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
    }).then((res) => {

contact.js в папке api

Комментарии:

1. Откуда вы делаете вызов API?

2. Так что пока у меня есть только одна страница (index.js), который находится в папке «страницы», я звоню отсюда после нажатия на кнопку : onClick={handleSubmit} const handleSubmit = (e) => { e.preventDefault(); fetch("/api/contact" ...

Ответ №1:

Итак, вот ответы, которые сработали : «не удалось загрузить ресурс» исчез после нескольких развертываний, но у меня все еще был 404. Проблема заключалась в том, что transporter.sendMail должен был быть асинхронным у меня была проблема с gmail, я перестал использовать другого почтового провайдера (zoho). Так что для тех, кто сталкивается с теми же проблемами, вот рабочий код (может быть, не самый лучший, но он работает) :

 export default async (req, res) => {
  require('dotenv').config()
  const nodemailer = require('nodemailer');

  async function mail() {
    console.log('enter async function');
    const transporter = nodemailer.createTransport({
      name: "smtp.zoho.com",
      port: 465,
      host: "smtp.zoho.com",
      auth: {
        user: process.env.mailsender,
        pass: process.env.mailpw,
      },
      secure: true,
    })
    let mail = await transporter.sendMail({
      from: process.env.mailsender,
      to: process.env.mailreceive,
      subject: `${req.body.message}`,
      text: `${req.body.message}`,
      html: `<div><p>${req.body.message}</p></div>`
    });
  }

  try {
    console.log('sending mail');
    await mail();
    res.status(200);
    console.log('mail should be sent');
  } catch (error) {
    console.log(error);
    console.log('error sending mail');
    res.status(404);
  } finally {
    res.end();
  };
}
Метки: