"405 Method Not Allowed for POST Requests in Vercel Production Environment".

[Satvik-Katochh]

Link to the code that reproduces this issue

https://github.com/VelankaniAIandCloudSolutions/VMS

To Reproduce

1. Start the application in development mode (npm run dev).
2. Deploy to Vercel production.
3. Make a POST request to /api/invitations/create-visit.
4. Make a GET reqeust to /api/inivitations/[visitID]/
5. Observe the 405 Method Not Allowed error in both the cases.

Current vs. Expected behavior

Setup:

1. Next.js Version: 14.2.4
2. Database: MySQL
3. Authentication & ORM: NextAuth.js & Sequelize
4. Deployment: Vercel

Issue Details:

1. Everything works perfectly locally, and the issue seems to only arise when deployed on Vercel.

2 ) POST API Issue: Initially, both GET and POST methods were implemented in the same API for create-visit, but the GET method wasn't working when POST was also present. After separating the GET logic into a different endpoint, the GET request works, but the POST request still returns a 405 error in production. The request is correctly made to www.mydomain/api/invitations/create-visit.

3. GET and PUT Issue: For the visitId API, both GET and PUT methods are defined for the same endpoint. Neither the GET nor the PUT request works in production—they both return a 405 error. Similar to the create-visit endpoint, if I separate the GET logic into a different endpoint, the GET request works, but the PUT request still doesn't.

Error Details: I've checked the Vercel logs and the network tab in the browser's developer tools; the error consistently shows as 500 & 405 in respective places, with no additional information to help diagnose the issue.

Environment Variables: I've double-checked that all environment variables are set correctly for both local and production environments.

Additional Information:

• I've also added CORS policies in next.config.js as suggested here, but the issue still persists.
• I've alos added the cors policies in next.config.mjs, but still the same error is coming..also i'm able to signIn into the live site using inbuilt signIn from NextAuth.js, there is no CORS error encountered. So why no cors error is coming during signin? how's that working?

Screenshots:
Screenshot

I'm really struggling to pinpoint the exact cause of this issue. It might be due to CORS configurations, an incorrect base URL, or something else entirely. I'm at a loss and would be extremely grateful for any help or suggestions to resolve this. I don't think the issue is due to CORS; it feels like something minor but hard to pinpoint.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #127-Ubuntu SMP Fri Jul 5 20:13:28 UTC 2024
  Available memory (MB): 15867
  Available CPU cores: 8
Binaries:
  Node: 22.3.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[samcx]

@Satvik-Katochh This CORS-related setup question is better suited for our Discussions!

[sang4lv]

Are there any followups? I'm seeing similar questions popping up, but none of the questions have a valid solution.

[rthidden]

This question started in the Vercel community five months ago. Then @pawlean told the OP to raise an issue in the Next.js repository. Then @samcx told the OP it is better here in the discussion, but I see no offer of a solution. Is there any progress?

[karvas]

I had the same issue where my API worked locally but returned 405 Method Not Allowed after deploying to Vercel.

For me, the problem was Vercel Authentication (https://vercel.com/docs/security/deployment-protection) blocking unauthenticated requests.

Fix: Go to your project in Vercel Dashboard. Navigate to Settings → General. Disable "Vercel Authentication". After disabling this setting, my API started working again!

[hookdump]

This did not fix the issue for me.

Including /api at the beginning of my endpoint did not fix it either.

[lukasz-szyszkowski]

Hey, any news about this? I have the same issue with 405 in vite project.

[Satvik-Katochh]

still checking this thread once in a while hoping someone figured it out 😓
no luck so far... kinda gave up and moved on from the project tbh.
this bug drained way too much time, if anyone ever finds a fix, please do drop it here.

[AlenPelin]

No need to disable vercel authentication. It is enough to add a x-vercel-protection-bypass: .... vercel header when making a request. The value is available in Settings/Deployment Protection

[jaogarcia97]

Similar issue using vite and openai's chatkit

[DjakaTechnology]

Spend few hours in this issue, finally found a fix.

Turns out my project is using static export output: "export". This doenst support API: https://nextjs.org/docs/pages/guides/static-exports.

Changed my config to

/** @type {import('next').NextConfig} */
const nextConfig = {
  // output: 'export', // Outputs a Single-Page Application (SPA).
  // distDir: './dist', // Changes the build output directory to `./dist/`.
  experimental: {
    reactCompiler: true,
  },
}
 
export default nextConfig

Now working flawlessly

[Vatsalsoni13]

That worked Thanks a lot

[elahinexustech]

Great @Satvik-Katochh it worked for our project it was in trouble for the last 24 Hours and cant resolve it out!