Nuxt•8mo ago

Fetch method Not Allowed, but works in other clients

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?

15 Replies

Alberto•8mo ago

even the smallest defineEventHandler !!!

Alberto•8mo ago

and with an easy one it works!

Likonima•8mo ago

start by using builtin $fetch 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 also i like double api api.fixer.net/api x)

Fabian B.•8mo ago

405 means that the HTTP method is not allowed. When you do a fetch or $fetch (which I would suggest) without configuration, it performs a GET request. However, when visiting 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')

// ...

Read more about $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.

Alberto•8mo ago

yes it does need auth, but in the mock clients Im passing them thanks! I'm on it!! I read that $fetch is recomended in the clientside Im doing it for the server side

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

with $ stills does 405 but in a better way How is my nuxt server different from the clients I used? in Rest Client this works soooooo well:

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": "[email protected]",
  "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": "[email protected]",
  "password": "**********",
  "csrfToken": "***********",
  "callbackUrl": "http://localhost:3000/login",
  "json": "true"
}

Likonima•8mo ago

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

Alberto•8mo ago

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

Alberto•8mo ago

if I am not authenticated it not even the client access

Likonima•8mo ago

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

Alberto•8mo ago

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

Likonima•8mo ago

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

Alberto•8mo ago

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": "[email protected]",
  "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": "[email protected]",
  "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

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

in nuxt 3 server, I use credentials include

Likonima•8mo ago

that is not an answer

Alberto•8mo ago

sometimes after it gives 405 I got requestIncludesCredentials: true, is true, Im using a module "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" next-auth and @sidebase/nuxt-auth, for session they work really well

//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", {

just before the fetch I get server session do I need axios?

Gaming

Programming

Fetch method Not Allowed, but works in other clients