Question

我试图在AWS ElasticBeanstalk / S3部署中使用Express作为API（api.mysite.co）和React作为SPA（app.mysite.co）来设置一个简单的API / SPA。对于身份验证，我正在尝试在仅HTTP的安全cookie中设置JWT。但是由于某种原因，cookie永远不会传递给客户端。

出于安全考虑，我已将域更改为mysite.co。

这是我的app.js文件，在快递中：

const dotenv = require('dotenv');
const express = require('express');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const helmet = require('helmet');
const passport = require('passport');
const cors = require('cors');

const usersRouter = require('./routes/users');

const env = process.env.NODE_ENV || 'development';
const port = process.env.PORT || '3000';
const app = express();

// Setup dev env variables and modules
if (env === 'development') {
  dotenv.config();
  app.use(logger('dev'));
}

app.use(helmet());

// Setup CORS requests based on environment
if (env === 'development') {
  app.use(cors());
} else {
  app.use(
    cors({
      origin: 'https://app.partsync.co',
      credentials: true,
    }),
  );
}

app.use(cookieParser());

// Handle CORS pre-flight reqests
app.options('*', cors());

app.use(passport.initialize());
require('./lib/auth/passport')(passport); // eslint-disable-line global-require

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/users', usersRouter);

// Catch all route that masks 404 for security
app.get('*', (req, res) => {
  res.status(401).json({ error: 'Unauthorized access' });
});

app.listen(port);

还有我的./routes/users文件以及登录路由。我已经确认它可以正常工作，因为发送了响应并且用户已登录到该应用程序。但是出于某种原因，cookie永远不会设置为Chrome。

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

const router = express.Router();

const mongodb = require('../db/mongodb');
const validateRegisterInput = require('../lib/validation/register');
const validateLoginInput = require('../lib/validation/login');

// // POST /users/login - User Login
router.post('/login', (req, res) => {
  mongodb.initDb().then((db) => {
    const collection = db.collection('users');
    const { errors, isValid } = validateLoginInput(req.body);

    if (!isValid) {
      return res.status(400).json(errors);
    }

    const { email, password } = req.body;

    return collection
      .find({ email })
      .limit(1)
      .toArray((connectErr, users) => {
        if (connectErr) {
          errors.email = 'Could not verify email. Please try again later.';
          return res.status(500).json(errors);
        }

        // Pull user out of array
        const user = users[0];

        if (!user) {
          errors.email = 'Username and Password do not match.';
          return res.status(400).json(errors);
        }

        return bcrypt.compare(password, user.password).then((isMatch) => {
          if (isMatch) {
            const payload = {
              id: user._id, // eslint-disable-line no-underscore-dangle
              expire_date: Date.now() + parseInt(process.env.JWT_EXPIRATION_MS, 10),
            };

            return jwt.sign(JSON.stringify(payload), process.env.PASSPORT_SECRET, (err, token) => {
              if (err) {
                return res.status(500).json({
                  password: 'There was an internal error. Please try again later',
                });
              }

              res.cookie('jwt', token, {
                domain: 'app.mysite.co',
                httpOnly: true,
                secure: true,
                maxAge: parseInt(process.env.JWT_EXPIRATION_MS, 10),
              });
              return res.status(200).json({
                name: user.name,
              });
            });
          }

          errors.password = 'Username and Password do not match.';
          return res.status(401).json(errors);
        });
      });
  });
});

module.exports = router;

在React SPA中，我使用Axios进行POST调用。在app.js文件中，我正在设置：

axios.defaults.baseURL = 'https://api.mysite.co';
axios.defaults.withCredentials = true;

然后像这样拨打电话

：

/**
 * @description Logins in new user and sets their token in localStorage
 * @param {object} user Input from the login form.
 */
export const loginUser = user => dispatch => axios
  .post('/users/login', user)
  .then((res) => {
    dispatch(setCurrentUser(res.data));
  })
  .catch((err) => {
    dispatch(handleError(err));
  });

要注意的一件事是，当我发送请求时，飞行前的OPTIONS和POST调用都具有请求标头：

Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: https://app.mysite.co
Referer: https://app.mysite.co/login
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36

我已经进行了一些研究，似乎显示Provisional headers are shown警告时，表明API调用无法正常工作。但是我在POST调用中从API得到了以下响应：

Request URL: https://api.mysite.co/users/login
Request Method: POST
Status Code: 200 
Remote Address: 52.201.140.183:443
Referrer Policy: no-referrer-when-downgrade

access-control-allow-credentials: true
access-control-allow-origin: https://app.mysite.co
content-length: 16
content-type: application/json; charset=utf-8
date: Sat, 23 Feb 2019 15:22:33 GMT
etag: W/"10-pyeidcXwb9ByfCNz+iqLTARQNP8"
server: nginx/1.14.1
status: 200
vary: Origin
x-powered-by: Express

Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Origin: https://app.mysite.co
Referer: https://app.mysite.co/login
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36

显示成功，然后用户登录。

任何帮助将不胜感激，因为似乎我在这里不胜其烦。我没有记录任何服务器或客户端错误，并且从我已阅读的所有内容中，在Express和Axios上都设置credentials: true标志应该可以解决问题。

谢谢！

Answer 1

因此，在尝试了一些不同的操作后，问题在于将res.cookie中的域设置为子域。我将该代码更改为：

              res.cookie('jwt', token, {
                domain: 'partsync.co',
                secure: true,
                httpOnly: true,
                maxAge: parseInt(process.env.JWT_EXPIRATION_MS, 10),
              });

现在正在设置cookie。

通过CORS进行Express / React-为React SPA设置仅HTTP的安全Cookie

1 个答案: