无法使用Angular 7将授权标头发送到Node 11 / Express 4服务器

时间:2019-04-22 16:24:09

标签: node.js angular express jwt

我无法通过GET 请求 Authorization 标头从同一个VPS上的有角前端发送到节点后端。

要使用角度发出请求,我使用

return this.httpClient.get<ApiResponse>(ApiClientService.apiAddress + ApiClientService.secureRoute + '/posts');

并使用JwtModule的http拦截器在app.module.ts中设置授权标头

  imports: [
    ...,
    JwtModule.forRoot({
      config: {
        tokenGetter,
        whitelistedDomains: [ApiClientService.apiAddress, 'vps.ip.address:VPS_FRONT_PORT', 'localhost:BACK_PORT', 'localhost:FRONT_PORT'], //todo clean
      }
    }),

当我在前面的铬检查器中查看请求时,就会看到

GET /secure/posts HTTP/1.1
Host: vps.ip.address:VPS_BACK_PORT
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: vps.ip.address:VPS_FRONT_PORT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/73.0.3683.86 Chrome/73.0.3683.86 Safari/537.36
Referer: vps.ip.address:VPS_FRONT_PORT/posts
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,fr;q=0.8

我们注意到Authorization标头丢失


问题并非来自IMO的拦截器

  • 在发出相同请求时,但对于google.com,我在Chrome检查器中看到了Authorization标头
  • 手动添加标题时,没有拦截器,我遇到了同样的问题

这让我认为问题出在我的节点服务器的 CORS / preflight请求配置中。 api.config.js

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*, localhost, localhost:FRONT_PORT, vps.ip.address:VPS_FRONT_PORT'); //todo change *
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
    res.header('Access-Control-Allow-Credentials', true);
    next();
})

...

const secureApi = express.Router();
app.use('/secure', secureApi);
secureApi.use(checkToken);
ProblemRoute.init(secureApi);
PostRoute.init(secureApi);
app.use(function (err, req, res, next) {
    console.error(err.stack);
    res.status(500).send('Something broke!');
});
const ApiConfig = {
    app: app
};

module.exports = ApiConfig;

阅读节点服务器上的授权标头。 secureRoute.js

const jwt = require('jsonwebtoken');

module.exports = function checkToken(req, res, next) {
    const authHeader = req.headers['authorization'];
    console.log(req.headers);
    if (authHeader.startsWith("Bearer ")) {
        const token = authHeader.substring(7, authHeader.length);

        if (token) {
            jwt.verify(token, 'my_secret_key', (err, decode) => {
                if (err) {
                    res.status(400).json({
                        "message": "Invalid token",
                    });
                } else {
                    next();
                }
            })
        } else {
            res.status(400).json({
                "message": "Token must be provided in header for endpoint access",
            });
        }
    } else {
        res.status(400).json({
            "message": "Token must be provided in header for endpoint access",
        });
    }
};

这当然会导致错误,这是因为Authorization标头已从有角前置请求中丢失

  

TypeError:无法读取未定义的属性“ startsWith”       在checkToken(/home/me/project/node-project/config/secureRoute.js:6:20)

当我向 postman 发出类似请求时,工作正常,这就是邮递员开发者控制台日志

  

获取   /snap/postman/81/usr/share/Postman/resources/app/html/vps.ip.address:BACK_PORT/secure/posts   内容类型:application / json缓存控制:无缓存邮递员令牌:   10a5caf7-711e-4c39-9437-58dd825ca05f授权:承载   eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtYWlsIjoicGF1bEBiZWxsb2Mub3ZoIiwiaWF0IjoxNTU1ODgzMjgxLCJleHAiOjE1NTU5Njk2ODF9.s6z5hBLJWEdlDgzw9E9ePiLWj9hqmd39RF68FNRlgLk   用户代理:PostmanRuntime / 7.6.0接受: / 主机:vps.ip.address:BACK_PORT   accept-encoding:gzip,deflate

然后,节点服务器读取请求/标头,并按预期方式回答200和内容。

1 个答案:

答案 0 :(得分:0)

最后,我认为错误是由我配置错误的拦截器引起的。我在列入白名单的域中添加了“ http://”部分,因此我认为它的行为不正确。

我也开始使用cors npm软件包,但是我不认为这是解决方法。