为什么 Next.js 将静态文件作为参数传递给 url？答案

【问题标题】：Why does Next.js pass static files as parameter to url?为什么 Next.js 将静态文件作为参数传递给 url？
【发布时间】：2020-04-03 12:36:12
【问题描述】：

首先，我得到了错误： Fetch API cannot load file:///xxxx/web-frontend/node_modules/axios/lib/core/createError.js. URL scheme must be "http" or "https" for CORS request.

我无法确定为什么会这样。然后我在 Python Backend API 控制台中看到了这条消息：

[10/Dec/2019 14:24:54] "GET /api/main_get/boards/b/ HTTP/1.1" 500 17478
[10/Dec/2019 14:24:54] "GET /api/main_get/ HTTP/1.1" 200 87
[10/Dec/2019 14:24:54] "GET /api/main_get/ HTTP/1.1" 200 87
Not Found: /api/main_get/boards/_stream_readable.js/
Not Found: /api/main_get/boards/events.js/
[10/Dec/2019 14:24:54] "GET /api/main_get/boards/_stream_readable.js/ HTTP/1.1" 404 30
[10/Dec/2019 14:24:54] "GET /api/main_get/boards/events.js/ HTTP/1.1" 404 30

然后我决定在 Node.js 控制台中记录参数。我得到了：

{ abbr: 'b' }
{ abbr: 'events.js' }
{ abbr: '_stream_readable.js' }

我的前端服务器设置：

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

const port = +process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = express();

    server.get('/boards/:abbr', (req, res) => {
        console.log(req.params);
        return app.render(req, res, '/boards', { abbr : req.params.abbr });
    })

    server.all('*', (req, res) => {
        return handle(req, res);
    });

    server.listen(port, err => {
        if (err) throw err;
        console.log(`Server is listening on port ${port}!`);
    })
});

为什么 Express/Next.js 服务器将文件识别为“abbr”参数？

【问题讨论】：

My board page
这个问题是因为getInitialProps在一个页面加载时触发了很多次。但是为什么这个方法被多次调用而不是一次呢？
您在github.com/Lebed-kun/imageboard/blob/master/web-frontend/pages/… 获得了正确的预期结果吗？我推测它会在/boards/${el.abbr} 处呈现带有不正确网址的链接，这些链接已预加载。您的 api 是否提供具有正确内容类型的数据？
是的。 API 与它有什么关系？问题是 Node.js 服务器尝试通过相同的动态 uri 获取静态文件，该 uri 用于获取页面内容，将文件名传递给“abbr”参数。当我尝试获取“localhost:3000/boards/b”时
该错误是由 API 引起的。我在 DB 中手动创建了线程，但忘记在第一篇文章中分配它们。

标签： node.js express next.js

【解决方案1】：

该错误是由 API 引起的。我在数据库中手动创建了线程，但忘记在第一次发布时分配它们。

【讨论】：

我遇到了同样的问题，但我不明白这个解决方案。能详细点吗？
原来我从传递给 getInitialProps 的 ctx 对象中获取了错误的属性（我使用的是 ctx.req.query 而不是 ctx.query）