Axios + NextJS always returning 405 method not allowed

Question

I'm strugling so hard with this..

I'm using NextJS for the frontend, actually doing a request to <frontend-domain>/api/auth/register from here

const changePassword = async (currentPassword, password) => {
    await axios.post('/api/auth/change-password', { currentPassword, password });
  };

and this is the api file that receives that request

import axios from 'utils/axios';

export default async function handler(req, res) {
  const {
    method,
    body: { currentPassword, password },
    headers: { authorization }
  } = req;
  try {
    if (method === 'POST') {
      const { data } = await axios.post(
        `${process.env.REACT_BACKEND_URL}users/change-password`,
        {
          password,
          currentPassword
        },
        {
          headers: {
            Authorization: authorization
          }
        }
      );
      res.status(200).send(data);
    } else {
      res.setHeader('Allow', ['POST']);
      res.status(406).end(`Method ${method} Not Allowed`);
    }
  } catch (error) {
    if (error.statusCode !== 500) {
      res.status(error.statusCode).end(error.message);
    } else {
      res.status(500).end(error);
    }
  }
}

I have a middleware that looks like this

import { NextResponse } from 'next/server';

export function middleware() {
  // retrieve the current response
  const res = NextResponse.next();

  // add the CORS headers to the response
  res.headers.append('Cache-control', 'no-store');
  res.headers.append('Access-Control-Allow-Credentials', 'true');
  res.headers.append('Access-Control-Allow-Origin', '*'); // replace this your actual origin
  res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT');
  res.headers.append('Access-Control-Allow-Headers', '*');

  return res;
}

// specify the path regex to apply the middleware to
export const config = {
  matcher: '/api/:path*'
};

and an axios utils that is just like this

/**
 * axios setup to use mock service
 */

import axios from 'axios';

const axiosServices = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default axiosServices;

But all I get from that endpoint is 405 METHOD NOT ALLOWED and that's it.

What I can tell you is tha the request is reaching my backend but I always have the same response from the frontend API.

Of course locally is working and I think it's an OPTION thing but I don't know where to go anymore.

Thanks

`file that receives that request` ... how does this file receive the request? Are you sure it does? Have you put a `console.log` right at the begging of `function handler(req, res) {` to see if that is even being called? Because, if that isn't even called, then the issue lies elsewhere that you haven't shown — Jaromanda X, Aug 18 '23 at 01:02
logs? just because the endpoint was called, doesn't mean that function you showed is called, because clearly it isn't being called. Does the function you have shown actually get called? It never returns a 405 status, it returns a 406 if the method isn't POST, what is the value of `method` in that function? — Jaromanda X, Aug 18 '23 at 01:05
If you do any other method than a POST it's returning 406. I've just tested that with postman and it returns the complete body as it shows there. The value of method is POST in the case you send a POST, OPTIONS, GET, HEAD — Julian Mendez, Aug 18 '23 at 01:06
Ahhh, OK, so it's clearly `axios.post` to `${process.env.REACT_BACKEND_URL}users/change-password` in that function that is getting that response from backend - and sending that in the `catch` `res.status(error.statusCode).end(error.message);` — Jaromanda X, Aug 18 '23 at 01:24

Axios + NextJS always returning 405 method not allowed

0 Answers0