He intentado muchas cosas en línea, pero nada funciona hasta ahora.
Primero intente (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!`); }); };Me da errores como:
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)Segundo intento (next.config.js):
module.exports = { async rewrites() { return [ { source: '/api/:path*', destination: 'http://localhost:5000/:path*' // Proxy to Backend } ] } }Esta cosa no está funcionando en absoluto.
Tercer intento ( next-http-proxy-middleware ):
// pages/[...all].ts ... export default (req: NextApiRequest, res: NextApiResponse) => ( isDevelopment ? 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/new': '/v2', '^/api': '', }, }) : res.status(404).send(null) );Esta cosa no tiene documentación en absoluto... no tengo idea de cómo funciona.
Cuarto intento:
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) })Esto se ejecuta express dentro de la siguiente aplicación. Necesitaba que la siguiente aplicación y el servidor estuvieran separados. Esto no es lo que quería.
Usando next-http-proxy-middleware , puede usar proxy fácilmente para la API en nextjs.
En primer lugar, vea cómo usar api en nextjs. -https://nextjs.org/docs/api-routes/api-middlewares
[...all].ts en la {yourproject_root}/pages/api/ de la ruta raíz de su proyecto.[...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' }, });localhost:3000/api/google o localhost:3000/api/myhome .En la versión v9.5.0, next ha agregado reescrituras que nos han facilitado la vida con los proxies.
const isDevelopment = process.env.NODE_ENV !== "production"; const rewritesConfig = isDevelopment ? [ { source: "/cats", destination: process.env.CATS_ENDPOINT, }, ] : []; module.exports = { reactStrictMode: true, rewrites: async () => rewritesConfig, }; Solo necesita agregar la función asíncrona de reescrituras en el archivo next.config.js , que devuelve una matriz de objetos que contienen los proxies. Puede reemplazar process.env.CATS_ENDPOINT en el ejemplo con cualquier URL absoluta, si no desea establecer el punto final como una variable env.