expressJWT 阻止公用文件夹，如何解除阻止？

Posted 2023-03-10

【中文标题】expressJWT 阻止公用文件夹，如何解除阻止？

【英文标题】：expressJWT blocking public folder, how to unblock?

【发布时间】：2018-05-30 15:37:14

【问题描述】：

我的 express/node 后端应用程序和前端应用程序以前是分开的，后端运行在 localhost:3000 上，前端应用程序使用 ng serve 启动并在 localhost:4200 上运行

然而，在我构建了应用程序之后，所有前端的东西都被缩小并放入 /public/ 文件夹中，它们都在端口 3000 上运行。我很确定它们应该像那样工作。由于我正在使用 expressJWT 中间件来保护我的一些没有令牌的访问者的路线，我现在在尝试在浏览器中接收前端应用程序时得到未经授权的 401 .....

如图所示，我可以毫无问题地加载 index.html，我还可以加载所有外部托管源，例如 boots strap 和 jquery 等... 但我自己的 .js 文件是 401。我认为这是因为 expressJWT，但我不完全确定。有谁知道问题是什么以及如何解决？

也可能是express配置错误？ 如您所见，我试图像这样“ubnlock”公用文件夹：

 app.use(expressJWT(secret: secret).unless(path : 
 ['/','../public/*','/api/authenticate', '/api/register']))

全程快递：

const express = require("express")
const bodyParser = require("body-parser")
const logger = require('morgan')
const api = require("./api/api")
const path = require('path')
const secret = require('./models/secrets')
const expressJWT = require('express-jwt')
const cors = require('cors');

const app = express()

app.set("json spaces", 2)
app.use(logger("dev"))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded( extended: false ))

// CORS middleware
app.use(cors());

app.use(expressJWT(secret: secret).unless(path : ['/','../public/*','/api/authenticate', '/api/register']))

app.use("/api/", api)

app.get('*', (req,res) => 
  res.sendFile(path.join(__dirname, 'public/index.html'));
);

app.use(function (req, res, next) 
  var err = new Error('Not Found')
  err.status = 404
  next(err)
)

app.use(function (err, req, res, next) 
  console.error(err.status)
  res.status(err.status || 500)
  res.json( msg: err.message, status: err.status )
)

// Body Parser middleware
app.use(bodyParser.json());

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));
//Call this to initialize mongoose
function initMongoose(dbConnection) 
  require("./db/mongooseConnect")(dbConnection)


app.initMongoose = initMongoose

module.exports = app

【问题讨论】：

还可以简化您的应用文件夹结构。我认为路径解析有问题，而不是 jwt。

抱歉，简化我的应用程序文件夹结构是什么意思？如果我注释掉我的行 app.use(expressJWT.......) 那么我可以访问 bundle.js 文件。至少他们不会取消授权 401 .. 而是将他们的内容替换为与 index.html 相同的内容。这引发了一个意外的令牌错误，因为 tehre 突然是 .js 文件中的 html 代码...我检查了公用文件夹中的原始文件，它们包含正确的 javascript 代码。真的很混乱

通常这个包文件是 webpack 加载器文件，并在你构建时生成。在更大的项目中，webpack 配置处理专有的 dist 文件夹，所有资源和页面都可以在延迟加载中访问。此外，您有两个不同的端口在使用中，它需要指定/设置在 index.html 中解析的基本 href。在大多数情况下，'/' 有效。但主要与您的文件夹结构有关。如果一切正常，还要检查“CORS”，也许秘密无法通过不同端口上的标头。

【参考方案1】：

在使用 jwt 之前使用 express 静态中间件。

示例：

app
  .use(express.static(STATIC_PATH))
  .use(
    exjwt( secret: SECRET ).unless(
      path: [/\/api\/v1\/identify/]
    )
  )

【参考方案2】：

我不是 100% 确定，但我猜你对这条线有疑问。

app.use(expressJWT(secret: secret).unless(path : ['/','../public/*','/api/authenticate', '/api/register']))

app.use("/api/", api)`

试试这个。放单/应该可以解决。

app.use('/api',expressJwt(secret: secret).unless(path: ['/','/public/*','/api/authenticate', '/api/register']);