當我的 React 和 Node 服務器不同（Firebase）時，我遇到 Passport 問題，但當它們相同時（Heroku）沒有問題

Question

我已經使用heroku部署了我的 React 應用程序，並且身份驗證適用於 Passport，但是當我使用 Firebase 托管和功能時，我遇到了一些我無法解決的問題。 登錄我的應用程序會刷新調用useEffect掛鈎的頁面，該掛鈎檢查用戶是否已登錄

const handleAdminLogin = async (username, password, e) => {
    e.preventDefault();
    await ADMIN.login(username, password).then((res) => {
      if (res.status === 200) {
        console.log(res);
        window.location.reload();
      }
    });
  };

  useEffect(() => {
    ADMIN.getUser().then((res) => {
      console.log("success");
      if (res) {
        setUser({
          id: res.data.id,
          loggedIn: true,
        });
      }
    });
  }, []);

服務器發送狀態 200，因此它正在接收沒有錯誤的請求

login: function (req, res, next) {
    passport.authenticate("local", (err, user, info) => {
      if (err) throw err;
      if (!user) res.sendStatus(401);
      else {
        req.logIn(user, (err) => {
          if (err) throw err;
          res.sendStatus(200);
        });
      }
    })(req, res, next);
  },

但這就是它停止的地方。 function getUser 沒有得到響應。 我知道在這種情況下我沒有正確處理錯誤，因此對此的建議也可能會有所幫助。

getUser: function (req, res) {
    if (req.user) {
      User.findOne({ username: req.user.username }).then((dbUser) => {
        res.send({
          id: dbUser._id,
          username: dbUser.username,
        });
      });
    }
  },

我相信我的 axios 調用具有正確的標題：

const URL = "https://us-central1-foothill-fitness.cloudfunctions.net/app";

const headers = {
  "Access-Control-Allow_Origin": "https://foothillfitness.com",
  "Content-Type": "application/json",
};

export default {
  // Gets user info
  getUser: function () {
    return axios.get(
      `${URL}/admin/user`,
      { withCredentials: true },
      { headers: headers }
    );
  },

  // Log the user in
  login: function (username, password) {
    return axios.post(
      `${URL}/admin/user/login`,
      { username, password },
      { withCredentials: true },
      { headers: headers }
    );
  },

我的護照中間件也可能導致問題，但是在本地運行服務器時，我沒有收到任何錯誤

module.exports = function (passport) {
  passport.use(
    // eslint-disable-next-line new-cap
    new localStrategy((username, password, done) => {
      User.findOne({ username: username }, (err, user) => {
        if (err) throw err;
        if (!user) return done(null, false);
        bcrypt.compare(password, user.password, (err, result) => {
          if (err) throw err;
          if (result === true) {
            return done(null, user);
          } else {
            return done(null, false);
          }
        });
      });
    })
  );

  passport.serializeUser((user, cb) => {
    cb(null, user.id);
  });
  passport.deserializeUser((id, cb) => {
    User.findOne({ _id: id }, (err, user) => {
      const userInformation = {
        username: user.username,
      };
      cb(err, userInformation);
    });
  });
};

還有一些服務器端代碼，我嘗試擺脫一些 CORS 錯誤：

app.use(
  cors({
    origin: "http://localhost:3000", // "https://foothillfitness.com", // <-- location of the react app were connecting to
    credentials: true,
  })
);

app.use("*", function (req, res, next) {
  // res.header("Access-Control-Allow-Origin", "https://foothillfitness.com");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});

// enable pre-flight
app.options("*", cors());

大約 30 秒左右后，控制台也會彈出此錯誤：

CORS 策略已阻止從源“http://localhost:3000”訪問“https://us-central1-foothill-fitness.cloudfunctions.net/app/admin/user”中的 XMLHttpRequest 策略：否“訪問控制” -Allow-Origin' header 出現在請求的資源上。

我不太明白，因為我在代碼中包含了 header。

對此的任何幫助將不勝感激，因為我對此一直失去理智。 如有必要，我可以提供更多詳細信息。

Answer 1

您在使用 axios 發送的標頭中有錯字。 Access-Control- Allow_Origin中有一個下划線。 將其更改為破折號，看看這是否解決了問題。

關於錯誤處理，您可以添加.catch和else ，如下所示：

 getUser: function (req, res) { if (req.user) { User.findOne({ username: req.user.username }).then((dbUser) => { res.send({ id: dbUser._id, username: dbUser.username, }); }).catch(err => { throw new Error(err) }); } else { throw new Error("No user provided") } }