javascript - Browser not saving a cookie in localhost when authenticating against NodeJS API, even though the cookie is sent - S

admin管理员组

文章数量:1415120

So, I am working on a full stack app, with a backend written in Node with Express. The app is currently on an AWS EC2 instance running using Nginx and pm2, hooked up to the database (also AWS) and seems to work fine when I access it via Postman. I can hit the POST /signin request, give it an email and password and it will return an auth cookie, which Postman then uses for subsequent requests, and I get a 200 OK when I hit GET /subscriptions in Postman.

I am now trying to get the frontend up and running. The FE is a React project using Vite, still on localhost, and I am using React Query and Axios to get and manage my data from the BE.

The problem I cannot solve is that the cookie that the backend sends (and it does send it), does not seem to be saved in the browser no matter what. I've tried:

• Both Firefox and Chrome
• Using 127.0.0.1 instead of localhost
• Mapping a custom domain app.something.something to 127.0.0.1 in the hosts file and accessing it that way
• Connecting to the local version of the app, instad of the AWS one
• Tweaking Response headers settings in Nginx on the server to no end
• Adding the cors package to the BE and setting the headers that way (I removed the Nginx config because it resulted in duplicate headers if I had both)
• Turning off every possible security option for the cookies (Secure, sameSite, httpOnly)

Nothing seems to work, and I'm out of ideas, and can't seem to find anything else to try on Google or with Copilot. Again, I can authenticate with Postman, so I think the backend is ok, but something is blocking the same thing in the browser, related to being localhost and/or something to do with headers/CORS/something...

This is how the backend server is setup

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import express from "express";
import man from "man";
import cors from "cors";
import cookieParser from "cookie-parser";

import router from "./router";
import { createNewUser, signIn } from "./handlers/users";
import { protect } from "./modules/auth";

const app = express();

const corsOptions = {
  origin: "http://localhost:5173", // I've changed this to match whatever way I'm accessing localhost 
  credentials: true,
};

app.use(cookieParser());
app.use(cors(corsOptions));

This is how I set the cookie on successfull login:

  const token = createJWT(user);

  res.cookie("token", token, {
    httpOnly: true,
    secure: false,
    sameSite: "None",
  });

  res.json("Authentication success");

And this is how I fetch it with Axios on the FE

export const authApi = axios.create({
  baseURL: API_URL,
  withCredentials: true,
});

authApi.defaults.headersmon["Content-Type"] = "application/json";

export const loginUser = async (user: LoginInput) => {
  const response = await authApi.post<ILoginResponse>("/signin", user);
  return response.data;
};

And no matter what I can see the cookie on the response in Firefox

But it seems to not get saved (when I go to Storage > Cookies it's empty), and not get sent back on the subsequent requests, resulting in the 401s that you see.

Here are the headers for POST /signin

Any help is much appreciated, I've wasted two days on this and have no idea what else to try.

本文标签：