Swagger UI 和 Vercel：意外令牌 < in JSON at position 1

Question

代码

完整的代码库和文件夹结构可以在 GitHub

中查看

这是Swagger相关的路由（必须将其设为独立服务器）

// api/v1.ts

import express = require("express");
import swaggerJSDoc = require("swagger-jsdoc");
import swaggerUi = require("swagger-ui-express");
import packageJSON = require("../package.json");
import path = require("path");

const app = express();
app.use(express.json());
app.use(express.static(path.resolve(__dirname, "../", "public")));

const swaggerSpec = swaggerJSDoc({
  swaggerDefinition: some_spec,
  apis: ["api/*"]
});

const cssOpts = some_css_override;

app.use("/api/v1", swaggerUi.serve, swaggerUi.setup(swaggerSpec, cssOpts));

module.exports = app;

问题

当我运行

vercel dev

（本地主机：3000/api/v1）时，我会按预期看到文档：

但是，当我将代码推送到触发 vercel 构建 的分支时，我看到以下内容：

检查控制台，我看到：

DevTools failed to load source map: Could not parse content for https://colormaster-1unjfn63b-lbragile.vercel.app/api/v1/swagger-ui-bundle.js.map: Unexpected token < in JSON at position 1

DevTools failed to load source map: Could not parse content for https://colormaster-1unjfn63b-lbragile.vercel.app/api/v1/swagger-ui-standalone-preset.js.map: Unexpected token < in JSON at position 1

即使他们的回应是

200

我知道这与 HTML 内容的

JSON.parse()

有关，但不知道如何解决这个问题。有什么想法吗？

Answer 1

我面临着与你完全相同的问题，尝试使用 Express 将 Swagger 部署到 Vercel，但没有成功。

我又做了一步，现在我在控制台中看到一个错误：

拒绝应用来自 'https://myurlishre.vercel.app/api-docs/swagger-ui.css' 因为它 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型，并且 启用严格的 MIME 检查。

我所做的是添加文件routes.ts

import { Router } from 'express';
import LanguageController from './controller/LanguageController';
import WordController from './controller/WordController';

const routes = Router();

routes.get("/word", WordController.find);
routes.get("/word/:wordName/language/:languageId", WordController.findByWordAndLanguage);
routes.post("/word", WordController.create);
routes.get("/language", LanguageController.find);

export default routes;

我的 server.ts 看起来像这样：

import mongoose from 'mongoose';
import routes from './routes';

const express = require("express");

if (process.env.NODE_ENV !== 'production') {
    require('dotenv').config();
}

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


mongoose.connect(process.env.MONGODB_URI || "", {
    dbName: "WordsThatIKnowMongoDB"
})
    .then(() => console.debug("Database connected!"))
    .catch(err => { console.debug(err) });

app.use(express.json());
app.use(express.static("/api-docs"));

app.use(cors());
app.use(routes);

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

routes.use('/api-docs', swaggerUi.serve);
routes.get('/api-docs', swaggerUi.setup(swaggerDocument));


app.listen(5000, () => {
    console.debug("Running on port 5000.");
});

// Export the Express API
module.exports = app;

您将在上面的文件中看到我更改了应用程序。到路线。像这样：

routes.use('/api-docs', swaggerUi.serve);
routes.get('/api-docs', swaggerUi.setup(swaggerDocument));

我仍然无法解决这个问题，但也许这个新错误可以帮助您找到解决方案。我也在找这个。

• 编辑：已解决。

这是解决我的问题的代码：

服务器.ts

import path from 'path';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import routes from './routes';

const express = require("express");
const app = express();

const ROOT_FOLDER = path.join(__dirname, '..');
const SRC_FOLDER = path.join(ROOT_FOLDER, 'src');

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// parse requests of content-type - application/json
app.use(bodyParser.json());

app.use(cors());
app.use(routes);

if (process.env.NODE_ENV !== 'production') {
    require('dotenv').config();
}

mongoose.connect(process.env.MONGODB_URI || "", {
    dbName: "WordsThatIKnowMongoDB"
})
    .then(() => console.debug("Database connected!"))
    .catch(err => { console.debug(err) });

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const options = { customCssUrl: '/public/swagger-ui.css', customSiteTitle: "The Words That I Know API - Swagger" };

app.use('/public', express.static(path.join(SRC_FOLDER, 'public')));
app.use('/', swaggerUi.serve);
app.get('/', swaggerUi.setup(swaggerDocument, options));

app.listen(5000, () => {
    console.debug("Running on port 5000.");
});

export default app;

不要忘记将 Swagger 的样式放在“/public/swagger-ui.css”中。在

public

内创建一个

src

文件夹并包含

swagger-ui.css

文件。在这里面，过去的招摇风格。您可以在浏览器上使用

inspect

找到 swagger 样式，然后转到

source

选项卡。在那里你会找到

swagger-ui.css

文件；粘贴样式代码后删除注释行。 如果您喜欢以简单的方式获取样式代码，请获取此文件。 https://github.com/deywersonp/ghibli-50-api/blob/main/src/public/css/swagger-ui.css

Answer 2

嘿我也遇到了同样的问题！我使用的解决方案不是最佳的，但它有效

知道 css 文件已在本地处理，我所做的就是将自定义 css 添加到我的 swagger-ui 文档中。因此，当CSS在本地工作时，我复制了所有CSS（检查网络浏览器看到了文件swagger-ui.css文件源代码），创建了一个CSS文件，将CSS粘贴到其中，然后将我的CSS文件添加到我的静态文件夹中.

这是如何添加服装CSS

const options = { customCssUrl: '/public/css/swagger-ui.css',};

router.use('/api-docs-ui', function(req, res, next){
  swaggerDocument.host = req.get('host');
  req.swaggerDoc = swaggerDocument;
  next();
}, swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

这是定义静态文件的方法

app.use('/public/css', express.static('public/css'));

所以现在本地我有 2 个 css 文件正在工作，但在 vercel 上只有一个正在工作！

希望能帮到你

Answer 3

如果您不想将 css 文件放入公共文件夹中，也可以使用 CDN 来处理 Swagger 样式。

Answer 4

这就是我解决问题的方法

const file = fs.readFileSync(path.resolve(__dirname, './swagger.yaml'), 'utf8');
const css = fs.readFileSync(
  path.resolve(__dirname, '../node_modules/swagger-ui-dist/swagger-ui.css'),
  'utf8'
);


const swaggerDocument = YAML.parse(file);
const options: swaggerUi.SwaggerUiOptions = {
  customCss: css,
};

app.use(
  '/api-docs',
  express.static('node_modules/swagger-ui-dist'),
  swaggerUi.serve,
  swaggerUi.setup(swaggerDocument, options)
);

我读取了css文件内容然后将其用作customCss