#Api route works with postman but does not work by calling it on the front end

1 messages · Page 1 of 1 (latest)

crimson skiffBOT
#

Hi @brave umbra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it's hard to pinpoint the exact issue as the code for both the API route and the frontend call seems correct. However, here are a few things you could check:

  1. Check the Network Tab in Developer Tools: Open the Network tab in your browser's developer tools and check the request being sent when you call the API from the frontend. Make sure the request URL, method, headers, and body are all correct.

  2. Check for CORS Issues: If your frontend and backend are not on the same domain, you might be running into Cross-Origin Resource Sharing (CORS) issues. Check the console in your browser's developer tools for any CORS errors.

  3. Check the Server Logs: If you have access to the server logs, check them for any errors or warnings when the API is called from the frontend.

  4. Check the Response: In your frontend code, you're only logging the error if the response is not ok (response.ok). Try logging the response regardless of its status to see if it contains any useful information.

  5. Check the Environment: Make sure that the environment variables and settings are the same when testing with Postman and from the frontend.

If none of these suggestions help, you might want to ask for help on a platform like StackOverflow or the Next.js GitHub Discussions, providing all the relevant code and any error messages you're seeing.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@brave umbra kapa.ai is still learning and improving, please let us know how it did by reacting below

brave umbra
#

the page refreshes once i hit the form submit the api call is in here is the whole api call
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
// if (collection && collectionStats) {
try {
const isAboveThreshold = Number(floorPrice) > priceThreshold;
const isBelowThreshold = Number(floorPrice) < priceThreshold;

    // if (
    //   (priceOption === "above" && isAboveThreshold) ||
    //   (priceOption === "below" && isBelowThreshold)
    // ) {
    //   console.log("email triggered price threshold met");

      const response = await fetch("/api/sendEmail", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: email,
          floorPrice: collectionStats.total.floor_price?.toString(), // Convert to string
          collectionName: collection?.name,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        console.log("Email sent successfully:", data);
        setEmailStatus("Email sent successfully");
      } else {
        const error = await response.json();
        console.error("Error sending email:", error.error);
        setEmailStatus(`Failed to send email: ${error.error}`);
      }
    // }
  } catch (error) {
    console.error("Error:", error);
    setEmailStatus("Failed to send email");
  }
// }

}; and here is the jsx {collection && collectionStats && (
<form
onSubmit={handleSubmit}
className="flex flex-col space-y-4 mt-4"
>
<h2 className="text-xl font-bold">Notification Settings</h2>
<label className="flex flex-col space-y-1">
<span className="text-lg font-medium">Email:</span>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="border-2 border-gray-200 p-2 rounded-md focus:outline-none focus:border-blue-500 transition-colors"
/>
</label>
<label className="flex flex-col space-y-1">
<span className="text-lg font-medium">
Notify me when the price is
</span>
<div className="flex space-x-2 items-center">
<select
value={priceOption}
onChange={(e) => setPriceOption(e.target.value)}
className="border-2 border-gray-200 p-2 rounded-md focus:outline-none focus:border-blue-500 transition-colors"
>
<option value="above">Above</option>
<option value="below">Below</option>
</select>
<input
type="number"
value={priceThreshold}
onChange={(e) => {
const newValue = parseFloat(e.target.value); // Convert input value to a number
if (!isNaN(newValue)) {

                  setPriceThreshold(newValue);
                }
              }}
              required
              className="border-2 border-gray-200 p-2 rounded-md focus:outline-none focus:border-blue-500 transition-colors"
            />{" "}
          </div>
        </label>
        <button
          type="submit"
          className="bg-blue-500 text-white p-2 rounded-md"
        >
          Set Alert
        </button>
        {emailStatus && (
          <p
            className={
              emailStatus.startsWith("Failed")
                ? "text-red-500"
                : "text-green-500"
            }
          >
            {emailStatus}
          </p>
        )}
      </form>
    )}
  </form>
crimson skiffBOT
#

Let me check the knowledge base for you. One moment! :books: