Next.js Discord

Discord Forum

Getting a 500 error from a redirect in a API route

Unanswered
European pilchard posted this in #help-forum
Open in Discord
European pilchardOP
Hi, I made an API route that is to be used on a form as an action to capture the results of the form. Everything runs successfully until I get to the point where the user is supposed to be redirected to the success page. The error below is what I get. I have my api running on port 3000, and my frontend on 3001 on purpose because this api should be able to run on any website I enter it into regardless of the URL or server. Is there a way I can disable this security measure for just the success page, since I know that I actually do want the forwarded host to not match the origin in this case? Thanks.

Edit: I meant route handler im using the app router

`x-forwarded-host` header with value `localhost:3000` does not match `origin` header with value `localhost:3001` from a forwarded Server Actions request. Aborting the action.


  return NextResponse.redirect(
    new URL(
      `/form-success/${forms[0].name}/${encodedReferrer}`,
      request.url
    )
  );
}

10 Replies

Toyger
you can try to change allowedOrigins in nextconfig
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ["website.com", "localhost:3000"]
    }
  }
}

module.exports = nextConfig

but tbh your architecture looks strange.
@Toyger you can try to change allowedOrigins in nextconfig js /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { serverActions: { allowedOrigins: ["website.com", "localhost:3000"] } } } module.exports = nextConfig but tbh your architecture looks strange.
European pilchardOP
So I saw that, but the way it’s being called is from any website. For example anyone can use my api publicly as a form action, and it’s supposed to redirect to my success page after
But it seems like I might have to statically host the success page or something to bypass it
@European pilchard So I saw that, but the way it’s being called is from any website. For example anyone can use my api publicly as a form action, and it’s supposed to redirect to my success page after
Toyger
if you already using api routes you can configure cors https://blog.logrocket.com/using-cors-next-js-handle-cross-origin-requests/ for them and use them whenever you want
but from your error it shows that it is some kind of server action invocation, so it's not an page router API route.
@Toyger if you already using api routes you can configure cors https://blog.logrocket.com/using-cors-next-js-handle-cross-origin-requests/ for them and use them whenever you want but from your error it shows that it is some kind of server action invocation, so it's not an page router API route.
European pilchardOP
What happens is the redirect works properly but it shows me that error. When I simply refresh the page it works tho because the URL is valid, it just doesn’t like that I’m redirecting to it from an external source. But I’m using app router and the page is a server component I didn’t do use client, so maybe it has something to do with it?
I can’t figure out I guess if the issue is when the redirect occurs or when the page is loading
Toyger
try to use 
return Response.redirect("your_url_as_string",302)

instead NextResponse
@Toyger try to use js return Response.redirect("your_url_as_string",302) instead `NextResponse`
European pilchardOP
That returns

Error [TypeError]: immutable
    at _Headers.delete (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/compiled/edge-runtime/index.js:1:657096)
    at runWithTaggedErrors (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/web/sandbox/sandbox.js:106:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.runEdgeFunction (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/next-server.js:1166:24)
    at async NextNodeServer.handleCatchallRenderRequest (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/next-server.js:245:37)
    at async DevServer.handleRequestImpl (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/base-server.js:789:17)
    at async (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/dev/next-dev-server.js:331:20)
    at async Span.traceAsyncFn (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async invokeRender (file:///Users/salvatorenoto/Web/notodevtools/node_modules/next/dist/server/lib/router-server.js:174:21)
As soon as I made it a serverless function it worked. I guess edge function didnt like it
European pilchardOP
Ah figured out how to do it on the edge too. Need to use redirect(/form-success/${encodedFormName}/${encodedReferrer}); from next/navigation. Thank you for your help