irlandrew
irlandrew•2mo 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
irlandrewOP•2mo 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
irlandrewOP•2mo 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
irlandrewOP•2mo ago
And I believe I need to paste all the backend main class Not sure how
CatalinIuga
CatalinIuga•2mo 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
irlandrewOP•2mo 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

Did you find this page helpful?