在静态Web应用程序的Azure函数中实现的Passport.js的CORS问题护照返回401

问题描述

我正在研究一个使用Azure静态Web应用程序产品的项目。我已经实现了由azure-function-express支持的Passport.js身份验证策略，该策略在Authentication标头中接收JWT，验证JWT，然后返回用户信息。

我的系统在本地运行，但是返回未经授权的401。

在部署中进行测试时，Application Insights推断资源由于CORS问题而被阻止，但未指定哪个资源。看来，尽管有CORS问题，该函数仍会执行，但即使测试帐户信息正确，也会返回401。

是否有人对此问题有经验或知道如何识别CORS正在阻止哪个资源？

Browser Error

Azure Live Analytics-很抱歉，这些文件无法完全扩展以提高可读性

CORS消息已展开

该请求具有原始标头：“ https://icy-plant-mysiteID.centralus.azurestaticapps.net”。

CORS策略执行失败。

请求源https://icy-plant-mysiteID.centralus.azurestaticapps.net没有访问资源的权限。

GetUserFromJwt Azure函数

const passport = require('passport');
const createHandler = require("azure-function-express").createHandler;
const express = require("express");
const app = express();
const mongooseHelper = require('../config/mongoose');


// Configure passport,express
require('../config/passport')(passport);
require('../config/express')(app,passport);

mongooseHelper.connectToMongoose("GetUserIdFromJwt");

app.get('/api/getUserIdFromJwt',passport.authenticate('jwt',{ session: false }),(req,res,next) => {
  res.status(200).json(req.user)
});

// Binds the express app to an Azure Function handler
module.exports = createHandler(app);

API调用（在检索JWT时从客户端调用）

export const getUserIdFromJwt = (jwt) => {
  return new Promise((resolve,reject) => {
    axios({
      url: '/api/getUserIdFromJwt',method: 'GET',headers: { "Authorization": jwt }
    }).then((res) => {
      resolve(res.data)
    }).catch((err) => {
      reject(console.log("An error occured getting the User from JWT: " + err));
    });
  })
}

护照配置

// Configure Passport
const User = require('../models/usermodel');
const JwtStrat = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;

const PUB_KEY = **MY KEY**;


const passportOptions = {
  jwtFromrequest: ExtractJwt.fromAuthHeaderAsBearerToken(),secretorKey: PUB_KEY,algorithms: ['OurAlgorithm'],passReqToCallback: true
}

const strat = new JwtStrat(passportOptions,payload,done) => {
  User.findOne({ _id: payload.sub })
    .then((user) => {
      if (user) {
        // Send id as User. Do not send personal info here.
        req.user = {id: payload.sub,role: payload.role}; 
        return done(null,req.user);
      } else {
        return done(null,false);
      }
    })
    .catch(err => {
      done(err,null)
    });
});

module.exports = (passport) => {
  passport.use(strat);
}

Express Config

const express = require('express')
const cors = require('cors');


module.exports = (app,passport) => {
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cors());
  app.use(passport.initialize());
}

解决方法

关于此问题，请参考以下步骤

创建Azure函数
Configure CORS for Azure function
代码。我使用Azure Cosmos DB Mongo API来保存用户。您可以访问here来阅读我的功能代码

护照配置

const passportJWT = require("passport-jwt");
const User = require("../Models/UserModel");

// passport & jwt config
const { Strategy: JWTStrategy,ExtractJwt: ExtractJWT } = passportJWT;

// define passport jwt strategy
const opts = {};
opts.jwtFromRequest = ExtractJWT.fromAuthHeaderWithScheme("jwt");
opts.secretOrKey =
  "QOOC3nUVl9yTZiH2F0VYjOJhwm2ZkyBjWK7Mzo4bH54cNBBUQmp262S0Tx1eBBTT";
opts.algorithms = ["HS256"];
const passportJWTStrategy = new JWTStrategy(opts,function (jwtPayload,done) {
  // retreive mail from jwt payload
  const email = jwtPayload.email;
  User.findOne({ email: email },(error,user) => {
    if (error) {
      return done(error,false);
    } else {
      if (user) {
        done(null,user);
      } else {
        done(null,false);
      }
    }
  });
});

// config passport
module.exports = function (passport) {
  // token strategy
  passport.use(passportJWTStrategy);

  // return configured passport
  return passport;
};

GetUserFromJwt Azure函数

const passport = require("passport");
const bodyParser = require("body-parser");
const createHandler = require("azure-function-express").createHandler;
const express = require("express");
const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json
app.use(bodyParser.json());

// init and configure passport
app.use(passport.initialize());

// Configure passport
require("../config/passport")(passport);

require("../config/mongo")
  .connect()
  .catch((error) => {
    throw error;
  });

app.get(
  "/api/getUserIdFromJwt",passport.authenticate("jwt",{ session: false }),(req,res,next) => {
    res.status(200).json(req.user);
  }
);

// Binds the express app to an Azure Function handler
module.exports = createHandler(app);

4创建jwt令牌

const jwt = require("jsonwebtoken");
const  secretOrKey =
  "QOOC3nUVl9yTZiH2F0VYjOJhwm2ZkyBjWK7Mzo4bH54cNBBUQmp262S0Tx1eBBTT";
const  token = jwt.sign(<your playlaod>,secretOrKey,{ algorithm: 'HS256' });
const jwt= `JWT ${token}`

在邮递员中测试

GET https://testjsfun.azurewebsites.net/api/getUserIdFromJwt

Authorization : JWT <token>

我与Microsoft技术支持联系后发现了问题。

Microsoft提供的静态Web App服务在内部使用了Authorization标头，因此通过Authorization标头发送给该函数的令牌已被修改或覆盖。通过使用其他标头发送JWT解决了该问题。

azure-functions azure-static-web-app http-status-code-401 passport.js