N
Nuxt10mo ago
Alberto

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?
No description
15 Replies
Alberto
AlbertoOP10mo ago
even the smallest defineEventHandler !!!
No description
Alberto
AlbertoOP10mo ago
and with an easy one it works!
No description
Likonima
Likonima10mo 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.
Fabian B.10mo 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
AlbertoOP10mo 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
Likonima10mo ago
my idea is that its bad devs returning 405 on unauthenticated. are you sure you have the cookies available?
Alberto
AlbertoOP10mo ago
Im including the credentials: "include", plus I'm able to access the list when I use the client (Rest Client)
No description
Alberto
AlbertoOP10mo ago
if I am not authenticated it not even the client access
Likonima
Likonima10mo 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
AlbertoOP10mo 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
Likonima10mo ago
youd need to make sure that the right cookie is avaibale with the right values
Alberto
AlbertoOP10mo 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
Likonima10mo ago
that is not an answer
Alberto
AlbertoOP10mo ago
No description
Alberto
AlbertoOP10mo 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?

Did you find this page helpful?