Node.js: вновь созданный заголовок (res.header) не отображается в Chrome - PullRequest
1 голос
/ 12 марта 2020

Я довольно новичок в JavaScript, Express & NodeJS. У меня возникают проблемы, когда я пытаюсь создать новый заголовок, который содержит токен при входе пользователя в систему (, как показано ниже при входе в систему POST router )

// Login POST Router
router.post('/login', async (req, res) => {

    // 1. Validatation
    const {error} = loginValidation(req.body)
    // if has error don't save
    if(error) return res.status(400).send(error.details[0].message)

    // 2. Check the existance of user/email in db
    const userEmail = await User.findOne({email: req.body.email})
    // if 'same/exist', then throw 'message/error'
    if(!userEmail) return res.status(400).send(`Email doesn't exist!`)

    // 3. Chack password (is correct)
    const validPassword = await bcrypt.compare(req.body.password, userEmail.password)
    if(!validPassword) return res.status(400).send(`Invalid password!`)

    // 4. Create & assign token to user
    const token = jwt.sign({_id: userEmail._id}, process.env.TOKEN_LOGINUSER)
    // add 'token' to header - just for identifier (can be any name)
    res.header('auth-token', token).json({ message: 'Logged In'})
})

Где тогда вход в систему страница, которая делает запрос на выборку ( логин. js, закодированный в Vanilla JavaScript), будет перенаправлять на домашнюю страницу (, как показано ниже при входе в систему. js - Страница входа )

if(loginRespond === 'Logged In') {

    let homeURL = '/index.html'
    window.location.replace(homeURL)
 }

, затем обратно в NodeJS, у меня есть маршрутизатор для home или '/' , который использует функцию для проверки токена первым ( как показано ниже )

router.get('/', verify, async (req, res) => {

    const data = await All.findById({ _id: req.user._id})
    res.json(data.data)
})

и имеют JSON веб-токен функция проверки ( как показано ниже )

// Middleware function
function verify(req, res, next) {

    // get token from header
    const token = req.header('auth-token')
    // if have, then allow. If don't have, then don't allow
    if(!token) return res.status(401).json({ message: 'Accessed denied!' })

    try {

        // verify the exist token
        const varified = jwt.verify(token, process.env.TOKEN_4LOGINUSER)
        req.user = varified
        next()
    } catch(err) {
        res.status(400).json({ message: 'Invalid token!' })
    }
}

А это мои Middlewares

// B. Global Middleware
// 1. Handle cors
app.use(cors())
// 2. Handle JSON body-parser
app.use(express.json())

Все отлично работает при тестировании с Почтальоном . Но, к сожалению, не с живым сайтом. Поскольку токен никогда не создавался и не может быть найден в Заголовок ответа на домашней странице в Chrome (, как показано ниже )

index.html or Homepage

Поскольку я новичок в express & nodejs, на самом деле я не знаю, как справиться с этой проблемой. Я пытаюсь найти его через Google. Но не могу найти правильное предложение или ключевое слово для поиска.

Надеюсь, вы, ребята, сможете указать мне, на что посмотреть, и что я должен прочитать или выучить, прежде чем пытаться это сделать.

1 Ответ

1 голос
/ 12 марта 2020

Вам нужно будет выставить свой собственный заголовок, добавив заголовок Access-Control-Expose-Headers.

res
    .header('Access-Control-Expose-Headers', 'auth-token')
    .header('auth-token', token)
    .json({ message: 'Logged In'})

Это необходимо для работы в браузере, но не для Почтальона.

Заголовок ответа Access-Control-Expose-Headers указывает, какие заголовки можно отобразить как часть ответа, перечислив их имена.

В качестве альтернативы, вы можете предоставить пользовательский параметр options для промежуточного программного обеспечения cors: app.use(cors({ exposedHeaders: 'auth-token' })) , Он ожидает строку с разделителями-запятыми (например, «Content-Range, X-Content-Range») или массив (например: [«Content-Range», «X-Content-Range»]).

Далее следует документация по этому вопросу из MDN .

По умолчанию отображаются только 7 заголовков ответов, сохраненных в CORS-списке:

  • Cache- Элемент управления
  • Язык содержимого
  • Длина содержимого
  • Тип содержимого
  • Срок действия
  • Дата последнего изменения
  • Pragma

Если вы хотите, чтобы клиенты имели доступ к другим заголовкам, вы должны перечислить их, используя заголовок Access-Control-Expose-Headers.

...