Swagger用户界面和Vercel:JSON中位置1处的意外标记〈

x33g5p2x  于 2022-11-06  发布在  其他
关注(0)|答案(2)|浏览(148)

编号
完整的代码库和文件夹结构可参见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(local-localhost:3000/api/v1)时,我看到了预期的文档:

但是,当我将代码推送到触发vercel build的分支时,我看到以下内容:

检查控制台,我看到:

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()有关,但不知道如何修复。有什么想法吗?

xtupzzrd

xtupzzrd1#

我正面临着和你完全一样的问题,试图用快递把斯瓦格部署到维塞尔,但没有成功。
我又执行了一个步骤,现在我在控制台中看到一个错误:
拒绝应用“https://myurlishere.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;

您将在上面的文件中看到我将app.更改为routes.,如下所示:

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

我仍然无法解决这个问题,但是这个新的错误也许可以帮助你找到解决方案。我也在寻找这个问题的方法。

  • EDIT:问题解决了。

这是解决我的问题的代码:
server.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;
monwx1rj

monwx1rj2#

嘿,我遇到了同样的问题!我使用的解决方案不是最优的,但它起作用了
知道css文件在本地处理得很好,我所做的就是将自定义css添加到我的swagger-ui文档中。因此,由于css在本地工作,我复制了所有的css(已检查的Web浏览器看到了swagger-ui. css文件的源代码),创建了一个css文件,将css粘贴到其中,然后将css文件添加到我的静态文件夹中。
下面是如何添加costum 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上只有一个工作!
希望能有所帮助

相关问题