使用Passport.js和Ngrok时，Req.user由于CORS而不确定

Question

前端是http localhost，后端是https ngrok。当我在前端与oauth登录并尝试在后端致电req.user时，它说未定义。

另外，如果后端和前端都使用nGrok，则会发生同样的问题。但是，如果我在后端不使用NGrok并使用http的Localhost，则一切正常。

ngrok命令：ngrok-主持人http 8000

express：app.ts

import "~/database";
import "~/libs/passport";

import express from "express";
import session from "express-session";
import cors from "cors";
import passport from "passport";
import { router } from "~/routes";

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(session({ secret: "asdf", resave: false, saveUninitialized: false }));

app.use(cors({ origin: true, credentials: true }));
app.use(passport.initialize());
app.use(passport.session());

app.use("/", router);
app.listen(8000, () => {
  console.log("Server has been started...");
});

react：app.tsx

import React, { useCallback, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const handleSignIn = useCallback(() => {
    window.location.assign("http://localhost:8000/api/auth");
  }, []);

  useEffect(() => {
    const process = async () => {
      const result = await fetch("http://localhost:8000/api/profile", {
        credentials: "include",
      });
      console.log(await result.json());
    };

    process();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <button onClick={handleSignIn}>DASD</button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

---

没有错误，但是req.user不确定。

/api/auth

api.get("/", passport.authenticate("github", { scope: ["repo"] }));

/api/auth/pallback

api.get(
  "/",
  passport.authenticate("github", {
    failureRedirect: failureURL,
    successRedirect: frontendOrigin,
  })
);

/profile，状态为401。/api/profile

add：并在前端呼叫/ api

api.get("/", async (req, res) => {
  if (!req.isAuthenticated()) {
    return res.status(401).json();
  }

  const profile: Profile = {
    username: req.user.username,
    name: req.user.name,
    avatarURL: req.user.avatarURL,
  };
  return res.status(200).json(profile);
});

Answer 1

显然，您不能

https://ngrok.com/docs/docs/faq

与HTTP基本身份验证的CORS

NGrok的HTTP隧道将与CORS一起使用，但您无法使用Ngrok的
- 基本实体选项。 NGrok的HTTP隧道允许您指定基本身份验证凭证以保护您的隧道。但是，Ngrok
在所有请求中执行此政策，包括前飞行选项
CORS规格要求的请求。在这种情况下，您的
应用程序必须实施自己的基本身份验证。

这可能是因为您yuse 凭据：true，ngrok已经使用- BASIC-AUTH选项。

您可以分享错误的错误吗？