时间戳

首页 > 解决方案 > 授权令牌 Axios 发送但 Express.js 未接收

express - 授权令牌 Axios 发送但 Express.js 未接收

问题描述

我有一个通过 Axios 使用 Express API 的 Vue 应用程序，试图访问经过身份验证的路由。在 Postman Request 标头中包含 Auth 令牌，路由会产生正确的 json 响应。但是，从 Vue 前端，它返回错误 404 未授权，未找到令牌。

以下是请求标头：

Request URL: http://localhost:8000/api/groups
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: [::1]:8000
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 2587
Content-Security-Policy: default-src 'none'
Content-Type: text/html; charset=utf-8
Date: Sat, 14 Sep 2019 21:47:42 GMT
X-Content-Type-Options: nosniff
X-Powered-By: Express
Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
Referer: http://localhost:8080/groups
Sec-Fetch-Mode: cors
token: Token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InVzZXJ0d29AZ21haWwuY29tIiwiaWQiOjIsImV4cCI6MTU3MzY4NTI0NiwiaWF0IjoxNTY4NDk3NjQ2fQ.6zDOfTQzf4KW5ry4mJFaLXnUL7wAnHP_8W0B0JEW5DA
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

这是回应：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>UnauthorizedError: No authorization token was found<br> &nbsp; &nbsp;at middleware (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express-jwt/lib/index.js:76:21)<br> &nbsp; &nbsp;at Layer.handle [as handle_request] (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/layer.js:95:5)<br> &nbsp; &nbsp;at next (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/route.js:137:13)<br> &nbsp; &nbsp;at Route.dispatch (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/route.js:112:3)<br> &nbsp; &nbsp;at Layer.handle [as handle_request] (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/layer.js:95:5)<br> &nbsp; &nbsp;at /Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:281:22<br> &nbsp; &nbsp;at Function.process_params (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:335:12)<br> &nbsp; &nbsp;at next (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:275:10)<br> &nbsp; &nbsp;at Function.handle (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:174:3)<br> &nbsp; &nbsp;at router (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:47:12)<br> &nbsp; &nbsp;at Layer.handle [as handle_request] (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/layer.js:95:5)<br> &nbsp; &nbsp;at trim_prefix (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:317:13)<br> &nbsp; &nbsp;at /Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:284:7<br> &nbsp; &nbsp;at Function.process_params (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:335:12)<br> &nbsp; &nbsp;at next (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/express/lib/router/index.js:275:10)<br> &nbsp; &nbsp;at jsonParser (/Users/dariusgoore/development/writerboard/writerboard-express-api/node_modules/body-parser/lib/types/json.js:110:7)</pre>
</body>
</html>

这是 Axios 的基本配置（console.log 语句检索正确的结果）：

import axios from 'axios'
const token = localStorage.getItem('token')
console.log('this is the token from localStorage ls', token)

export default () => {
  return axios.create({
    baseURL: process.env.VUE_APP_ROOT_API,
    headers: {
      'Content-Type': 'application/json',
      token: token,
    },
    validateStatus: function () {
      return true;
    }
  })
}

这是我在 Express 服务器中的 cors 配置：

const cors = require('cors');

const app = express()

...

var corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}
app.use(cors(corsOptions));

这是应该检索令牌的身份验证中间件（但根据控制台日志正在获取“未定义”）：

const jwt = require('express-jwt');

const getTokenFromHeaders = (req) => {
  const { headers: { authorization } } = req;
  console.log('this is the authorization token from the header: ', authorization);

  if(authorization && authorization.split(' ')[0] === 'Token') {
    return authorization.split(' ')[1];
  }
  return null;

};

const auth = {
  required: jwt({
    secret: 'secret',
    userProperty: 'user',
    getToken: getTokenFromHeaders,
  }),
  optional: jwt({
    secret: 'secret',
    userProperty: 'user',
    getToken: getTokenFromHeaders,
    credentialsRequired: false,
  }),
};

module.exports = auth;

这是我要确保的快速路线：

const express = require('express');
const auth = require('../middlewares/authenticate');
const User = require('../models/User');
const knex = User.knex();

let router = express.Router();

router.get('/', auth.required, async (req, res) => {
  console.log('this is the req.user from /groups', req.user);
  const userId = req.user.id

  let results = await knex.raw(`SELECT users.id, users.username, groups.id, groups.name FROM users JOIN memberships ON users.id = memberships.users_id JOIN groups ON memberships.groups_id = groups.id WHERE users.id = ${userId}`);
  console.log(results);
  res.json(results.rows);
});

标签： expressvue.jsaxios

解决方案

你的服务器有这个：

const { headers: { authorization } } = req;

这似乎是在寻找一个名为authorization.

您的要求是这样的：

token: Token eyJhbGciOiJIUzI1...

由于此：

headers: {
  'Content-Type': 'application/json',
  token: token,
},

那个标头叫做token，不是authorization。

推荐阅读