Fetch method Not Allowed, but works in other clients

Alberto · 2024-02-29T21:51:28.179Z

I need to do a GET to have a list, I need the authoritation with cookie. When I use Rest Client or Thunder Client I have the 200. great But from my defineEventHandler in my server/api in Nuxt 3, when I do the fetch I got the specific "Request failed with status 405". And GET works both in the 2 other clients. What do you see?

A

AlbertoOP•2/29/24, 10:03 PM

even the smallest defineEventHandler !!!

A

AlbertoOP•2/29/24, 10:10 PM

and with an easy one it works!

L

Likonima•3/1/24, 9:09 AM

start by using builtin $fetch

L

Likonima•3/1/24, 9:12 AM

I do get a 405 aswell. that means that get req is now allowed. does it need auth? if yes who configured it to be 405 lol

L

Likonima•3/1/24, 9:13 AM

also i like double api api.fixer.net/api x)

F

Fabian B.•3/1/24, 11:18 AM

405 means that the HTTP method is not allowed. When you do a

fetch

fetch

or

$fetch

$fetch

$fetch

$fetch (which I would suggest) without configuration, it performs a GET request. However, when visiting

https://api.fxer.net/api/trial

https://api.fxer.net/api/trial

https://api.fxer.net/api/trial

https://api.fxer.net/api/trial in the browser, you get an 405 Method not allowed.

This means you likely need to do a POST or check their documentation.

const response = await $fetch('https://api.fxer.net/api/trial')

// ...

const response = await $fetch('https://api.fxer.net/api/trial')

// ...

const response = await $fetch('https://api.fxer.net/api/trial')

// ...

const response = await $fetch('https://api.fxer.net/api/trial')

// ...

Read more about

$fetch

$fetch

$fetch

$fetch https://nuxt.com/docs/api/utils/dollarfetch

Nuxt

$fetch · Nuxt Utils

Nuxt uses ofetch to expose globally the $fetch helper for making HTTP requests.

LLikonima I do get a 405 aswell. that means that get req is now allowed. does it need auth...

A

AlbertoOP•3/1/24, 11:57 AM

yes it does need auth, but in the mock clients Im passing them

A

AlbertoOP•3/1/24, 11:58 AM

thanks! I'm on it!!

FFabian B.405 means that the HTTP method is not allowed. When you do a `fetch` or `$fetch`...

A

AlbertoOP•3/1/24, 12:18 PM

I read that $fetch is recomended in the clientside

A

AlbertoOP•3/1/24, 12:19 PM

Im doing it for the server side

A

AlbertoOP•3/1/24, 12:19 PM

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    console.log("session: ", !!session, session);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await $fetch("https://api.fxer.net/api/trial", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      cache: "no-cache",
    });

    if (!response.ok) {
      console.error("Response not OK:", response);
      event.res.writeHead(500, { "Content-Type": "application/json" });
      event.res.end(
        JSON.stringify({
          error: `Request failed with status ${response.status}`,
        })
      );
      return;
    }

    const data = await response.json();
    event.res.writeHead(response.status, {
      "Content-Type": "application/json",
    });
    event.res.end(JSON.stringify(data));
  } catch (error) {
    console.error("Error fetching data:", error);
    event.res.writeHead(500, { "Content-Type": "application/json" });
    event.res.end(JSON.stringify({ error: "Internal Server Error" }));
  }
});

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    console.log("session: ", !!session, session);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await $fetch("https://api.fxer.net/api/trial", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      cache: "no-cache",
    });

    if (!response.ok) {
      console.error("Response not OK:", response);
      event.res.writeHead(500, { "Content-Type": "application/json" });
      event.res.end(
        JSON.stringify({
          error: `Request failed with status ${response.status}`,
        })
      );
      return;
    }

    const data = await response.json();
    event.res.writeHead(response.status, {
      "Content-Type": "application/json",
    });
    event.res.end(JSON.stringify(data));
  } catch (error) {
    console.error("Error fetching data:", error);
    event.res.writeHead(500, { "Content-Type": "application/json" });
    event.res.end(JSON.stringify({ error: "Internal Server Error" }));
  }
});

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    console.log("session: ", !!session, session);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await $fetch("https://api.fxer.net/api/trial", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      cache: "no-cache",
    });

    if (!response.ok) {
      console.error("Response not OK:", response);
      event.res.writeHead(500, { "Content-Type": "application/json" });
      event.res.end(
        JSON.stringify({
          error: `Request failed with status ${response.status}`,
        })
      );
      return;
    }

    const data = await response.json();
    event.res.writeHead(response.status, {
      "Content-Type": "application/json",
    });
    event.res.end(JSON.stringify(data));
  } catch (error) {
    console.error("Error fetching data:", error);
    event.res.writeHead(500, { "Content-Type": "application/json" });
    event.res.end(JSON.stringify({ error: "Internal Server Error" }));
  }
});

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    console.log("session: ", !!session, session);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await $fetch("https://api.fxer.net/api/trial", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      cache: "no-cache",
    });

    if (!response.ok) {
      console.error("Response not OK:", response);
      event.res.writeHead(500, { "Content-Type": "application/json" });
      event.res.end(
        JSON.stringify({
          error: `Request failed with status ${response.status}`,
        })
      );
      return;
    }

    const data = await response.json();
    event.res.writeHead(response.status, {
      "Content-Type": "application/json",
    });
    event.res.end(JSON.stringify(data));
  } catch (error) {
    console.error("Error fetching data:", error);
    event.res.writeHead(500, { "Content-Type": "application/json" });
    event.res.end(JSON.stringify({ error: "Internal Server Error" }));
  }
});

A

AlbertoOP•3/1/24, 12:27 PM

with $ stills does 405 but in a better way

A

AlbertoOP•3/1/24, 12:34 PM

How is my nuxt server different from the clients I used?

A

AlbertoOP•3/1/24, 12:34 PM

in Rest Client this works soooooo well:

A

AlbertoOP•3/1/24, 12:35 PM

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json
###
POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "**********",
  "csrfToken": "***********",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json
###
POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "**********",
  "csrfToken": "***********",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json
###
POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "**********",
  "csrfToken": "***********",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json
###
POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "**********",
  "csrfToken": "***********",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

L

Likonima•3/1/24, 12:52 PM

my idea is that its bad devs returning 405 on unauthenticated. are you sure you have the cookies available?

LLikonima my idea is that its bad devs returning 405 on unauthenticated. are you sure you ...

A

AlbertoOP•3/1/24, 1:16 PM

Im including the credentials: "include", plus I'm able to access the list when I use the client (Rest Client)

A

AlbertoOP•3/1/24, 1:17 PM

if I am not authenticated it not even the client access

L

Likonima•3/1/24, 1:18 PM

well there is a difference in how youre authenticating in the client and in your code. how are you doing it in your client?

A

AlbertoOP•3/1/24, 1:18 PM

but no worries I changed my plan, now Im calling a public API, Id try to finish the test with https://restcountries.com/v3.1/all

L

Likonima•3/1/24, 1:18 PM

youd need to make sure that the right cookie is avaibale with the right values

A

AlbertoOP•3/1/24, 1:20 PM

In Rest Client and Thunder client
I do the login and then the get:


POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "something",
  "csrfToken": "something",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json

In Rest Client and Thunder client
I do the login and then the get:


POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "something",
  "csrfToken": "something",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json

In Rest Client and Thunder client
I do the login and then the get:


POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "something",
  "csrfToken": "something",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json

In Rest Client and Thunder client
I do the login and then the get:


POST https://api.fxer.net/api/login HTTP/1.1
Content-Type: application/json

{
  "email": "trial@fxer.net",
  "password": "something",
  "csrfToken": "something",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

GET https://api.fxer.net/api/trial HTTP/1.1
content-type: application/json

A

AlbertoOP•3/1/24, 1:21 PM

const response = await $fetch("https://api.fxer.net/api/trial", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include",
  cache: "no-cache",
});

const response = await $fetch("https://api.fxer.net/api/trial", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include",
  cache: "no-cache",
});

const response = await $fetch("https://api.fxer.net/api/trial", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include",
  cache: "no-cache",
});

const response = await $fetch("https://api.fxer.net/api/trial", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include",
  cache: "no-cache",
});

A

AlbertoOP•3/1/24, 1:23 PM

in nuxt 3 server, I use credentials include

L

Likonima•3/1/24, 1:24 PM

that is not an answer

A

AlbertoOP•3/1/24, 1:25 PM

A

AlbertoOP•3/1/24, 1:26 PM

sometimes after it gives 405 I got requestIncludesCredentials: true,

LLikonima that is not an answer

A

AlbertoOP•3/1/24, 1:26 PM

is true, Im using a module

A

AlbertoOP•3/1/24, 1:26 PM

"dependencies": {
"next-auth": "^4.21.1",
"nuxt": "^3.10.3",
"vue": "^3.4.19",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@sidebase/nuxt-auth": "^0.6.7"

A

AlbertoOP•3/1/24, 1:27 PM

next-auth and @sidebase/nuxt-auth, for session they work really well

A

AlbertoOP•3/1/24, 1:28 PM

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await fetch("https://api.fxer.net/api/trial", {

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await fetch("https://api.fxer.net/api/trial", {

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await fetch("https://api.fxer.net/api/trial", {

//server/api/test.get.js
import { getServerSession } from "#auth";

export default defineEventHandler(async (event) => {
  try {
    const session = await getServerSession(event);

    if (!session) {
      event.res.writeHead(401, { "Content-Type": "application/json" });
      event.res.end(JSON.stringify({ status: "unauthenticated" }));
      return;
    }

    const response = await fetch("https://api.fxer.net/api/trial", {

A

AlbertoOP•3/1/24, 1:28 PM

just before the fetch I get server session

A

AlbertoOP•3/1/24, 1:30 PM

do I need axios?

Fetch method Not Allowed, but works in other clients

Similar Threads

Similar Threads

Similar Threads