🗒️

NextJs&NodeJs全栈踩坑记录

2024-08-06约 2 分钟962 字

☰ 目录

type
Post
status
Published
date
Feb 1, 2024
slug
nextjs-difficult
summary
tags
开发
推荐
必看精选
热门文章
category
技术分享
icon
password

1、api路由拦截

相关官方文档：Routing: Middleware | Next.js (nextjs.org)
在根目录添加 middleware.js

2、页面路由拦截

相关官方文档：next.config.js Options: redirects | Next.js (nextjs.org)
在next.config.js 文件中添加

3、开发、生产启动端口指定

全部指定为9999

4、使用fetch上传文件，Content-Type指定为From表单，上传失败

相关文档：XMLHttpRequest Standard (whatwg.org)
解决办法：去除content-type指定即可

5、next build 打包后mysql报错：MySQL Error: Received packet in the wrong sequence.

官方文档：next.config.js Options: webpack | Next.js (nextjs.org)
相关问题：NodeJs API + Webpack 2 Production Builds = Error: Received packet in the wrong sequence · Issue #1655 · mysqljs/mysql (github.com)

6、next.js 引用Ant Design Pro Components报错

ProLayout - 高级布局：ProLayout - 高级布局 - ProComponents (ant.design)
相关问题：Prop `className` did not match. · Issue #52 · ant-design/cssinjs (github.com)
引用方法改为：

7、模拟接口请求提示AxiosError: Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream

直接上错误代码：
乍一看没问题，细一看也没问题，问题在于这是NodeJs环境，使用FormData需要引入form-data依赖。
点击查看源码-lengsukq/daily_push/blob/master/ql-linkAi.js

8、允许跨域请求

直接上代码：
参考的官方文档：next.config.js Options: headers | Next.js (nextjs.org)
苏

冷苏

全栈开发者 · 前端 / 移动端 / Python / 桌面应用

GitHub ⟶

1.0k

字数

2

分钟