Hello guys, I have a production website hosted on netlify. In my app I'm using various types of APIs such as the openAI API and for some reason I got a 502 error when using them. I have tested the actual endpoint with postman and it worked all fine, but when I'm doing the request from my actual site then I have the 502 problem.

This is the code where I'm calling the request.

import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  if (req.method !== "POST") {
    res.status(405).json({ error: "Method not allowed" });
    return;
  }

  const { messageContent } = req.body;

  if (!messageContent) {
    res.status(400).json({ error: "Invalid message content" });
    return;
  }

  try {
    const configuration = new Configuration({
      apiKey: process.env.OPENAI_KEY
    });

    const openaiAPI = new OpenAIApi(configuration);
    const response = await openaiAPI.createChatCompletion(
      {
        model: "gpt-3.5-turbo",
        messages: [
          {
            role: "user",
            content: messageContent,
          },
        ],
      },
      {
        headers: {
          "User-Agent": "Mozilla/5.0 (compatible; MyCoolApp/1.0)",
        },
      }
    );

    if (response.data.choices && response.data.choices.length > 0) {
      const firstChoice = response.data.choices[0];
      if (firstChoice.message && firstChoice.message.content) {
        const content = firstChoice.message.content;
        res.status(200).json({ content });
      }
    }
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "An error occurred" });
  }
}

and this is the error that I'm getting: