irlandrew
irlandrew5d ago

cors header issue

Hey, Im building a web project and now I'm facing a problem with cookies and sessions. When I try to provide to the user session credentials through my backend, I'm getting constantly "missing cors header 'Access-Control-Allow-Origin' " through the console output of the browser I tried many solutions provided through stack overflow but none is working for me
5 Replies
irlandrew
irlandrewOP5d ago
Through the client I "login" with this method:
const handleLogin = async () => {
try {

const mojangResponse = await fetch(
`http://localhost:8000/mojang-api/users/profiles/minecraft/${username}`
);

if (!mojangResponse.ok) {
const errorData = await mojangResponse.json();
setError(errorData.error || "Invalid Minecraft username.");
return;
}

const mojangData = await mojangResponse.json();
setSkin(`https://crafatar.com/avatars/${mojangData.id}`);
setError(null);


const fastLoginResponse = await fetch("http://localhost:8000/api/fast-login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username }),
credentials: "include",
});

if (!fastLoginResponse.ok) {
const loginError = await fastLoginResponse.json();
setError(loginError.message || "Error during fast login.");
return;
}


setIsLoggedIn(true);
setError(null);


setTimeout(() => {
onClose();
}, 5000);
} catch (err) {
setError("An error occurred while connecting to the server.");
}
};
const handleLogin = async () => {
try {

const mojangResponse = await fetch(
`http://localhost:8000/mojang-api/users/profiles/minecraft/${username}`
);

if (!mojangResponse.ok) {
const errorData = await mojangResponse.json();
setError(errorData.error || "Invalid Minecraft username.");
return;
}

const mojangData = await mojangResponse.json();
setSkin(`https://crafatar.com/avatars/${mojangData.id}`);
setError(null);


const fastLoginResponse = await fetch("http://localhost:8000/api/fast-login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username }),
credentials: "include",
});

if (!fastLoginResponse.ok) {
const loginError = await fastLoginResponse.json();
setError(loginError.message || "Error during fast login.");
return;
}


setIsLoggedIn(true);
setError(null);


setTimeout(() => {
onClose();
}, 5000);
} catch (err) {
setError("An error occurred while connecting to the server.");
}
};
irlandrew
irlandrewOP5d ago
Console output: Translated is: Request through other origin blocked. Its policy prevents read the remote resource in "ip api adress" (reason: missing CORS header 'Access-Control-Allow-Origin'). State of the code 401
No description
irlandrew
irlandrewOP5d ago
And I believe I need to paste all the backend main class Not sure how
CatalinIuga
CatalinIuga5d ago
I think you might be missing some headers from your backend. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers & https://stackoverflow.com/a/46505542 should be of help. You might also need Access-Control-Allow-Credentials: true.
Stack Overflow
Why does my http://localhost CORS origin not work?
I am stuck with this CORS problem, even though I set the server (nginx/node.js) with the appropriate headers. I can see in Chrome Network pane -> Response Headers: Access-Control-Allow-Origin:htt...
MDN Web Docs
Cross-Origin Resource Sharing (CORS) - HTTP | MDN
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in ord...
irlandrew
irlandrewOP5d ago
Yes but I do have it written:
app.use('*', async (c, next) => {
c.header('Access-Control-Allow-Origin', 'http://localhost:5173/*');
c.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
c.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
c.header('Access-Control-Allow-Credentials', 'true');

if (c.req.method === 'OPTIONS') {
return c.text('', 204);
}

await next();
});
app.use('*', async (c, next) => {
c.header('Access-Control-Allow-Origin', 'http://localhost:5173/*');
c.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
c.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
c.header('Access-Control-Allow-Credentials', 'true');

if (c.req.method === 'OPTIONS') {
return c.text('', 204);
}

await next();
});
in Access-Control-Allow-Origin I tried everything localhost, , 127.0.0.1 , localhost:5173 ... I'm still in development so thats the reason I'm not using a domain right now Solved Used cors from hono, as wiki says: app.use( '', cors({ origin: ['http://localhost:5173'], allowHeaders: ['Content-Type', 'Authorization'], allowMethods: ['GET', 'POST', 'OPTIONS'], credentials: true, }) ); at the beginning and worked for me