"Request failed with status code 405", I getting this error after deploying app on vercel

Question

project is working completely fine in local server but after deploying on vercel it is giving this error , both frontend and backend are deployed on vercel

here is the live project : live project

frontend github : frontend backend github : backend

this is the error image : error image

I want to fix this error and make the project working

Munger

Answer 1

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.

Phobia

Answer 2

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.

Routinize

+1 the tip to check your logs - my issue was nothing to do with the type of request (I was missing an environment variable, which was causing a compile error) – Microwatt

Answer 3

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",
          },
        }
      );

Glooming

Answer 4

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

Australorp

Answer 5

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.

Lemmie

Answer 6

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

Spermatogonium

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sonyasoo

Answer 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)

Pellitory

Answer 8

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.

Allelomorph

yes change the front end to call POST vs GET or change the backend to allow POST or GET. – Allelomorph

I am also facing the same issue, This issue is not related to GET,POST change needed since it works absolutely fine from localhost react app to the vercel hosted backend node app – Glooming

same issue here. backend it works great, vercel not so much – Toomey