Next.js 自定义 Server,使用express+http-proxy-middleware做代理,解决跨域问题,主要是因为rewrites做代理时接口超过30秒会超时
·

装包:
yarn add express http-proxy-middleware
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080 --turbopack",
"dev2": "node server.ts",
"build": "next build --turbopack",
"start": "next start"
},
"dependencies": {
"antd": "^5.27.6",
"express": "^5.1.0",
"http-proxy-middleware": "^3.0.5",
"next": "15.5.6",
"prettier": "^3.6.2",
"prettier-plugin-tailwindcss": "^0.7.1",
"react": "19.1.0",
"react-dom": "19.1.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"tailwindcss": "^4",
"typescript": "^5"
}
}
server.ts:
import { parse } from 'url'
import next from 'next'
import { createProxyMiddleware } from 'http-proxy-middleware'
import express from 'express'
const port = parseInt(process.env.PORT || '8080', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app
.prepare()
.then(() => {
const server = express()
server.use(
'/api',
createProxyMiddleware({
target: 'http://192.168.31.164:8888',
secure: false,
changeOrigin: true,
pathRewrite: function (path, req) {
console.log('path', path)
// 可以在这里重写路径
return `/api${path}`
},
on: {
proxyReq: (proxyReq, req, res) => {
//console.log(proxyReq)
/* handle proxyReq */
},
proxyRes: (proxyRes, req, res) => {
//console.log(proxyRes)
/* handle proxyRes */
},
error: (err, req, res) => {
console.log(err)
/* handle error */
}
}
})
)
server.use(function (req: any, res: any) {
const parsedUrl = parse(req.url!, true)
handle(req, res, parsedUrl)
})
server.listen(port, (err: any) => {
if (err) {
throw err
}
console.log(`> Ready on http://localhost:${port}`)
})
})
.catch((err) => {
console.log('An error occurred, unable to start the server')
console.log('发生错误,无法启动服务器')
console.log(err)
})
common.d.ts:
declare module 'express';
启动:
yarn dev2

更多推荐
所有评论(0)