Next.js Discord

Discord Forum

Api requests failed in production (403 Forbidden)

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I implemented a little server-side redirection logic with a toast message. I temporarily save the toast in a variable during the redirection and then retrieve it on the target page and display it (Image 1)

Then I created two server actions which invoke these HTTP methods (Image 2).


So it works fine locally, but production (vercel) queries failed with this error:
GET REQUEST ERROR
Response {
  status: 403,
  statusText: 'Forbidden',
  headers: Headers {
    'cache-control': 'private, no-store, max-age=0',
    'content-type': 'text/plain; charset=utf-8',
    server: 'Vercel',
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'default',
  url: 'https://prod_base_path/api/toast'
}


But the strangest thing is that I don't get any error when I try in postman. So I think that maybe it's a production config that's missing. Any help is appreciated

2 Replies

adam.birds
Can you provide code blocks rather than screenshots of your code as its esier for people to potentially try and recreate.
@adam.birds Can you provide code blocks rather than screenshots of your code as its esier for people to potentially try and recreate.
West African LionOP
Ok
api/toast/route.ts
import { NextResponse } from "next/server";
import { ExplotelToast } from "@/lib/stores/use-toast-store";

let app_toast: ExplotelToast = null;

export async function GET() {
  if (app_toast) {
    const toast = app_toast;
    app_toast = null;
    return NextResponse.json(toast);
  }
  return NextResponse.json(null);
}

export async function POST(request: Request) {
  const { toast } = await request.json();
  if (toast) {
    app_toast = toast;
  }
  return NextResponse.json({ status: "success" });
}`



server actions

"use server"
export const ACT_redirect_with_toast = async (
  path: string,
  toast: ExplotelToast,
) => {
  await fetch(`${process.env.NEXT_PUBLIC_HOME_URL}/api/toast`, {
    method: "POST",
    body: JSON.stringify({ toast }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  redirect(path);
};

export const ACT_read_toast = async (): Promise<ExplotelToast> => {
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_HOME_URL}/api/toast`,
    );
    return await response?.json();
  } catch (err) {
    return null;
  }
};