CODEWITHSUNDEEP
node.jsreactjsvercelhttp-status-code-405
Sujal Tangde
Sujal Tangde

Reputation: 87

Receiving "Request failed with status code 405" after deploying app on Vercel

My project is working completely fine on my local server, but after deploying on Vercel it is gives me this error. Both front-end and back-end are deployed on Vercel.

Here is my live project

Source code:

This is the image of the error I am receiving: error image

My aim is to fix this error and make the project working.

Upvotes: 7

Views: 12519

Answers (10)

Vasilis Karantousis
Vasilis Karantousis

Reputation: 31

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!

Upvotes: 0

benka
benka

Reputation: 4742

My problem was I had next export in the build script in package.json.

"build": "next build && next export"

Changing it to:

"build": "next build"

fixed the api call. No more 405.

The thing I overlooked:

next export is used to export your Next.js application as a set of static HTML files.
Statically exporting a Next.js application via next export disables API routes and middleware. This command is meant for static-only hosts, and is not necessary to make your application static. Pages in your application without server-side data dependencies will be automatically statically exported by next build, including pages powered by getStaticProps.

Upvotes: 0

alkadelik
alkadelik

Reputation: 573

I had the same issue. The problem is that I needed a way to add the variables in the .env file from my local on Vercel. I did this with the following steps:

  1. Navigate to the project on my Vercel dashboard.
  2. Select "Settings" (of the project).
  3. Select "Environment Variables" - (on the left pane/menu from my desktop).
  4. Vercel has a list of default environments (Production, Preview, and Development). I left all of them checked however, select or deselect the appropriate ones for your project.
  5. Next, I entered the "Key" e.g. VUE_ENV_VAR and "Value" e.g. https://example.com of my environment variables in the input fields provided. You can add multiple variables. Enter each one in a new key:value pair.
  6. SAVE - click the save button provided

After doing the above, you have to REDEPLOY the project in order for the changes to take effect. Do this by:

  1. Navigate to Deployments (this was on the top menu for me)
  2. (You will be presented with a lit of projects or past deployments). Click the options menu (...)on the project or deployment, and select Redeploy

Vercel will then rebuild the project and you're good to go.

Upvotes: -1

ramkumar sgurav
ramkumar sgurav

Reputation: 1

in my case I forgot to add cloudinary envs . such a silly mistake

Upvotes: 0

imprakashraghu
imprakashraghu

Reputation: 7

next() method in the middleware usually redirects your requests to the actual workflow to which route you called. So in nextjs, you have to add the status code when using the next function. This solves the issue of "405 Method Not Allowed"

Use the status code: 302 (for redirection)

Upvotes: -2

Leumas
Leumas

Reputation: 21

I was experiencing the same error, and none of the solutions listed worked.

In my case, I have been able to solve it by adding the IP 0.0.0.0/0 to the Network Access of my database created with Mongo Atlas.

It should be noted that, in my case, it was a test project.

I recommend you review the Vercel logs so you can get more information about your problem.

I hope it can help someone or rule out possible errors. Thank you.

Upvotes: 2

Gerison
Gerison

Reputation: 315

I was facing the same issue, working perfectly on localhost but returning 405 when deployed on Vercel. I have decided to deploy my app on Render.com, and it is working. This seems to be a "bug" or misconfiguration on Vercel's side. Try to deploy your app on alternative providers, as I have done. This delayed me for weeks, and now my app is up and running on Render. (I am not affiliated with Render; I just found it to be a viable alternative since Vercel is throwing 405 errors for no apparent reason) (Sorry, it's my first SO answer)

EDIT: After thinking about it for sometime, my problem was that I was using the VERCEL_URL (https://vercel.com/docs/projects/environment-variables/system-environment-variables) in my code, and since vercel generates multiple URLs for the same deployment, my server was trying to fetch from a different url than the one i am fetching although it is the same deployment. I fixed it by providing my own VERCEL_URL env variable instead of using the automatic one, i disabled "Automatically expose System Environment Variables" in my deployment settings. My project is now working in vercel. I hope this is helpful to anyone facing the same issue.

Upvotes: 5

jorgedev1
jorgedev1

Reputation: 1

if your BASEURL is in an environment variable, when deploying in vercel register your environment variable in pROJECT VERCEL/SETTINGS/VARIAVEIS ENVIRONMENT

Upvotes: -1

Haider Raza
Haider Raza

Reputation: 485

After looking at your code I am exactly sure you landed into the same issue as I did. Look its related to how axios works: On localhost:

1.

package.json : "proxy":"http://url.com"

and 2.

export default axios.create({
  baseURL: "https://url",
});

would be sufficient for axios to be given relative paths such as:

const loginHandler = async (email, password) => {
    try {
      const response = await axios.post(
        "/api/users/login",
        {
          email,
          password,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

But when hosted on Vercel it needs to be absolute path for now. So basically in your axios calls replace the relative paths to that of Absolute paths and it should solve your problem:

const loginHandler = async (email, password) => {
    try {
      const response = await axios.post(
        `https://url.vercel.app`+`/api/users/login`,
        {
          email,
          password,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

Upvotes: 0

Andrew Arrow
Andrew Arrow

Reputation: 4585

Error 405 is "Method not allowed". This is most likely a GET vs POST. i.e. you are trying to call /endpoint with the wrong HTTP verb. Or maybe your backend has defined it as a GET but that should be changed to the POST. You want to use a GET when the user is just making a request for data but not changing any state in the database. POST for when you ARE inserting a new record. Then there a subtle difference between PUT and PATCH but start with GET vs POST.

Upvotes: -5

Related Questions