MERN 应用程序未存储会话

Question

我的 MERN 应用程序无法在浏览器上存储会话。后端由 Heroku 托管，客户端由 Vercel 托管。当我切换到本地主机时，它按预期工作，但在部署时，它无法存储任何会话。如果我尝试登录用户，它将通过身份验证，但不会在我的浏览器上存储会话。

我收到此错误：

    Access to XMLHttpRequest at 'https://myapp-backend.herokuapp.com/user' from origin 'https://myapp-client.vercel.app' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这是我所拥有的。

服务器.js：

const url = process.env.MONGO_DB_URL

mongoose.connect(url, {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
})

const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error'))
db.once('open', () => {
  console.log('connected to mongo database')
})

const app = express()

app.set('views', path.join(__dirname, 'views'))

app.use(
  mongoSanitize({
    replaceWith: '_',
  })
)
app.use(helmet())
app.use(express.json())
app.use(
  cors({
    origin: ['http://192.168.1.14:3000', 'https://myapp-client.vercel.app'],
    credentials: true,
  })
)
app.use(express.static(path.join(__dirname, 'public')))

// express session middleware

const store = MongoStore.create({
  mongoUrl: url,
  secret: process.env.MONGO_SECRET,
  touchAfter: 24 * 60 * 60,
})

store.on('error', err => {
  console.log(err)
})

app.use(
  session({
    store,
    name: 'rfts',
    secret: process.env.MONGO_SECRET,
    resave: false,
    saveUninitialized: true,
    cookie: {
      expires: Date.now() + 1000 * 60 * 60 * 24 * 3,
      maxAge: 1000 * 60 * 60 * 24 * 3,
      httpOnly: true,
      secure: true,
  })
)

app.use(cookieParser(process.env.COOKIE_SECRET))

// passport middleware
app.use(passport.initialize())
app.use(passport.session())
passport.use(new LocalStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser())

const PORT = process.env.PORT || 3001

app.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

在客户端，我用它来调用服务器：

import axios from 'axios'

const macUrl = 'http://192.168.1.14:3001'
const localUrl = 'http://localhost:3001'
const herokuUrl = 'https://myapp-backend.herokuapp.com'

const axiosCall = axios.create({
  baseURL: herokuUrl,
  withCredentials: true,
})

export default axiosCall

任何建议将不胜感激！

Answer 1

我没有 Heroku 部署的经验。但根据我的经验，原始 url 应与 cors[] 数组的第一个元素匹配。 请在后端代码中尝试一下：

app.use(cors({ origin: ['https://myapp-client.vercel.app', 'http://192.168.1.14:3000'], credentials: true, methods: ['GET', 'PUT', 'POST', 'OPTIONS', 'DELETE'] }));

origin: array 中元素的顺序将根据应用程序位置更改：本地主机或实时站点。

Answer 2

兄弟，现在已经2到3年了，你有解决方案吗？如果您已经解决了该错误，您想告诉我吗？因为我也遇到了同样的错误，我的后端在其他地方，前端不是 Vercel，而且我的网站也出现了同样的错误。