javascript - 拦截器未正确发送 header

Question

我在使用 Angular 5 时遇到 HTTP 请求问题。我需要发送一个包含 token (jwt) 的 header ，因此我编写了一个拦截器以便能够在用户登录后添加 token 。问题是 header 未作为独立 header 发送，并且在发送时缺少值。

这是我在网上找到并尝试使用的示例代码:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable <HttpEvent<any>> {

  console.log("intercepted request ... ");

  // Clone the request to add the new header.
  const authReq = req.clone({ headers: req.headers.set("headerName", "headerValue") });

  console.log("Sending request with new header now ...");
  console.log(authReq.headers);

  //send the newly created request
  return next.handle(authReq)
    .catch((error, caught) => {
      //intercept the respons error and displace it to the console
      console.log("Error Occurred");
      console.log(error);
      //return the error to the method that called it
      return Observable.throw(error);
    }) as any;
}

这是发送 header 的方式:

HttpHeaders {normalizedNames: Map(0), lazyUpdate: Array(1), headers: Map(0), lazyInit: HttpHeaders}
headers:Map(1) {"headername" => Array(1)}
lazyInit:null
lazyUpdate:null
normalizedNames
:Map(1)
size:(...)
__proto__:Map
[[Entries]]:Array(1)
0:{"headername" => "headerName"}
key:"headername"
value:"headerName"
length:1
__proto__:Object

这是服务器接收它的方式:

'access-control-request-headers': 'headername',
accept: '*/*',
'accept-encoding':

你能给点建议吗？我做错了什么？

编辑

我发现问题出在中间件上，我找不到问题所在。

中间件负责验证用户是否有token。问题是当发送请求时，包含 token 的 header 没有按应有的方式发送。

这是我的中间件:

router.use(function(req,res,next){
    // do logging
    console.log('Somebody just came to our app!');
    console.log(req.headers);
    // check header or url parameters or post parameters for token
    var token = req.body.token || req.query.token || req.headers['x-access-token'];

    // decode token
    if (token) {

        // verifies secret and checks exp
        jwt.verify(token, superSecret, function(err, decoded) {
            if (err) {
                return res.json({ success: false, message: 'Failed to authenticate token.' });
            } else {
                // if everything is good, save to request for use in other routes
                req.decoded = decoded;
                next(); // make sure we go to the next routes and don't stop here
            }
        });

    } else {

        // if there is no token
        // return an HTTP response of 403 (access forbidden) and an error message
        return res.status(403).send({
            success: false,
            message: 'No token provided.'
        });

    }
});

我也在使用我上面提到的拦截器，有一个小的变化:

const authReq = req.clone({ headers: req.headers.set('x-access-token', token) });

现在从前端发送的每个需要验证的请求看起来像这样:

Somebody just came to our app!
{ host: 'localhost:3000',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
  'accept-language': 'he,he-IL;q=0.8,en-US;q=0.5,en;q=0.3',
  'accept-encoding': 'gzip, deflate',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'x-access-token',
  origin: 'http://localhost:4200',
  connection: 'keep-alive',
  pragma: 'no-cache',
  'cache-control': 'no-cache' }
OPTIONS /api/todos 403 0.930 ms - 48

所以我无法验证用户，因为 token 不是 header 的一部分。

我做错了什么？

谢谢

Answer 1

在 req.clone() 函数中使用 setHeaders。

const authReq = req.clone({
    setHeaders: {
        "Authorization": "Bearer " + token
    }
});