问题描述
我在网上尝试了很多东西,但到目前为止没有任何效果。
首先尝试 (src/pages/api/proxy/[...slug].js):
import { createProxyMiddleware } from 'http-proxy-middleware';
// Create proxy instance outside of request handler function to avoid unnecessary re-creation
const apiProxy = createProxyMiddleware({
target: 'http://localhost:5000',changeOrigin: true,pathRewrite: { [`^/api/proxy`]: '' },secure: false,});
export default function (req,res) {
apiProxy(req,res,(result) => {
if (result instanceof Error) {
throw result;
}
throw new Error(`Request '${req.url}' is not proxied! We should never reach here!`);
});
};
给我这样的错误:
TypeError: Object(...) is not a function
at Module../pages/api/[...slug].js (/home/user/app/client/.next/server/pages/api/[...slug].js:109:101)
at __webpack_require__ (/home/user/app/client/.next/server/pages/api/[...slug].js:23:31)
at /home/user/app/client/.next/server/pages/api/[...slug].js:91:18
at Object.<anonymous> (/home/user/app/client/.next/server/pages/api/[...slug].js:94:10)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:996:19)
at require (node:internal/modules/cjs/helpers:92:18)
at DevServer.handleApiRequest (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:64:181)
at runMicrotasks (<anonymous>)
at processticksAndRejections (node:internal/process/task_queues:94:5)
at async Object.fn (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:56:492)
at async Router.execute (/home/user/app/client/node_modules/next/dist/next-server/server/router.js:23:67)
at async DevServer.run (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:66:1042)
第二次尝试(next.config.js):
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',destination: 'http://localhost:5000/:path*' // Proxy to Backend
}
]
}
}
这东西根本行不通。
第三次尝试 (next-http-proxy-middleware):
// pages/[...all].ts
...
export default (req: NextApiRequest,res: NextApiResponse) => (
isDevelopment
? httpProxyMiddleware(req,{
// You can use the `http-proxy` option
target: 'https://www.example.com',// In addition,you can use the `pathRewrite` option provided by `next-http-proxy`
pathRewrite: {
'^/api/new': '/v2','^/api': '',},})
: res.status(404).send(null)
);
这东西根本没有文档......不知道它是如何工作的。
第四次尝试:
const express = require('express')
const next = require('next')
const { createProxyMiddleware } = require("http-proxy-middleware")
const port = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const apiPaths = {
'/api': {
target: 'http://localhost:3080',pathRewrite: {
'^/api': '/api'
},changeOrigin: true
}
}
const isDevelopment = process.env.NODE_ENV !== 'production'
app.prepare().then(() => {
const server = express()
if (isDevelopment) {
server.use('/api',createProxyMiddleware(apiPaths['/api']));
}
server.all('*',(req,res) => {
return handle(req,res)
})
server.listen(port,(err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
}).catch(err => {
console.log('Error:::::',err)
})
这会在下一个应用程序中运行 express。 我需要将下一个应用程序和服务器分开。这不是我想要的。
解决方法
使用 next-http-proxy-middleware
,您可以轻松地在 nextjs 中代理 api。
首先查看nextjs中api的使用方法。 -https://nextjs.org/docs/api-routes/api-middlewares
- 在项目根路径的
[...all].ts
路径中创建一个{yourproject_root}/pages/api/
文件。 - 复制下面的代码并将其写入
[...all].ts
文件。
export default (req: NextApiRequest,res: NextApiResponse) => httpProxyMiddleware(req,res,{
// You can use the `http-proxy` option
target:'https://www.example.com',// In addition,you can use the `pathRewrite` option provided by `next-http-proxy`
pathRewrite: {
'^/api/google':'https://google.com','^/api/myhome':'https://github.com/stegano'
},});
- 运行 nextjs,打开浏览器,然后尝试连接到
localhost:3000/api/google
或localhost:3000/api/myhome
。