无法使用 Netlify 和 Heroku 跨域设置/接收 cookie

Question

我遇到了无法在浏览器中设置 cookie 的问题，因为客户端托管在 Netlify 上，服务器托管在 Heroku 上。它在本地主机上运行良好，所以看起来它现在与跨域有关。

阅读了多篇关于此的文章后，似乎这可能与 cors 或我如何设置 cookie 有关。

我在某处读到它可能有助于添加secure: true和sameSite: "none"设置 cookie，所以我添加了它们，但没有帮助。我也尝试过domain在设置cookie时添加它，但不幸的是它也没有帮助。

我正在使用 Chrome，并已将设置从阻止第三方 cookie 更改为允许所有 cookie，因为我读到这有时可能是一个问题。然而它也没有产生任何新的结果。

我还读到，无论出于何种原因，它可能需要代理，或者可以通过在 Heroku 上托管客户端和服务器来解决这个问题。如果可能的话，我宁愿不做任何这些事情，但欢迎任何想法。

服务器端使用 Node js (express) 托管在 Heroku 上：

const express = require("express");
const app = express();
require("dotenv").config();
const cors = require("cors");
const mysql = require("mysql");
const jwt = require("jsonwebtoken");
const cookieParser = require("cookie-parser");

// port for heroku if needed
const PORT = 3001;

// app objects instantiated on creation of the express server
app.use(
  cors({
    origin: [
      "https://examples.netlify.app",
      "http://localhost:3000",
    ],
    methods: ["GET", "POST", "DELETE"],
    credentials: true,
  })
);
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());

/*
 * Handel user login
 */
app.post("/sign-in", (req, res) => {
  const { email, password } = req.body;

  sqlSelectAllUsers = "SELECT * FROM user_db WHERE email = ?";
  db.query(sqlSelectAllUsers, [email], (err, user) => {
    if (err) {
      res.send({ err: err });
    }

    if (user && user.length > 0) {
      // given the email check if the password is correct

      bcrypt.compare(password, user[0].password, (err, compareUser) => {
        if (compareUser) {
          //req.session.email = user;
          // create access token
          const accessToken = createAccessToken(user[0]);
          const refreshToken = createRefreshToken(user[0]);
          // create cookie and store it in users browser
          res.cookie("access-token", accessToken, {
            maxAge: 1000 * 60 * 30, // 30 min
            httpOnly: true, // hinder doing document.cookies as it will be httpOnly which will make it more safe
            secure: true,
            domain: "https://examples.netlify.app/",
            sameSite: "none",
          });
          res.cookie("refresh-token", refreshToken, {
            maxAge: 2.63e9, // approx 1 month
            httpOnly: true,
            secure: true,
            domain: "https://examples.netlify.app/",
            sameSite: "none",
          });

          // update refresh token in database
          const sqlUpdateToken =
            "UPDATE user_db SET refresh_token = ? WHERE email = ?";
          db.query(
            sqlUpdateToken,
            [refreshToken, user[0].email],
            (err, result) => {
              if (err) {
                res.send(err);
              }
              res.sendStatus(200);
            }
          );
        } else {
          res.send({ message: "Wrong email or password" });
        }
      });
    } else {
      res.send({ message: "Wrong email or password" });
    }
  });
});

app.listen(process.env.PORT || PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

在 Netlify 上托管 React 的客户端：

  export default function SignIn() {
  const history = useHistory();

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // eslint-disable-next-line no-console
    axios
      .post(
        "https://example.herokuapp.com/sign-in",
        {
          email: data.get("email"),
          password: data.get("password"),
        },
        { withCredentials: "true" }
      )
      .then((response) => {
        //check if good response then give user a token for valid login
        if (response.data === "OK") {
          history.push("/");
          history.go(0);
        }
      });
  };
}

Answer 1

我不久前遇到了这个问题，简短的回答是：\nHeroku 不会为域设置 cookie *.herokuapp.com，因此如果您的应用程序依赖于 cookie，则无法为您的前端使用 Netlify 或其他托管。这是因为herokuapp.com包含在 Mozilla Foundation\xe2\x80\x99s 公共后缀列表中。

\n

您对此无能为力。

\n

如果你想尝试一些东西，我找到的解决方案（使用 Express 服务器和 Angular 前端）是将静态路由/文件夹添加到 Express 服务器，我将在其中放置通过构建 Angular 应用程序生成的文件（命令ng build --configuration production） 。当你得到这些文件时，你git add使用 Heroku CLI 进行推送。

\n

通过这样做，Heroku 构建了 Express Server，并且您之前使用 Angular CLI 构建的文件都托管在 Heroku dyno 中。这样，cookie 就会被设置，因为不再是跨域，并且应用程序可以正常工作。

\n

有关 Heroku 为何阻止此操作的更多信息，请参阅其文档的链接：\n https://devcenter.heroku.com/articles/cookies-and-herokuapp-com

\n

编辑：忘记提及我的应用程序使用了 cookie，因为它实现了“本地策略”Passport。我没有编写任何代码来处理 cookie，但需要托管能够设置它们以使我的应用程序正常工作。

\n