I have tried lots of things online but nothing is working so far.
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!`);
});
};
Gives me errors like:
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
}
]
}
}
This thing is not working at all.
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)
);
This thing has no documentation at all... have no idea how it works.
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)
})
This runs express inside next app. I needed the next app and the server to be separated. This is just not what I wanted.
In version v9.5.0, next has added rewrites which has made our lives easier with 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,
};
Just need to add the rewrites async function in next.config.js
file, which returns an array of objects containing the proxies. You can replace process.env.CATS_ENDPOINT
in the example with any absolute url, if you wish not to set the endpoint as an env variable.
Using next-http-proxy-middleware
you can easily proxy the api in nextjs.
First of all, check out how to use api in nextjs. -https://nextjs.org/docs/api-routes/api-middlewares
[...all].ts
file in the {yourproject_root}/pages/api/
path of your project root path.[...all].ts
file.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
or localhost:3000/api/myhome
.Actually, your first-try is working for me with next@12.1.2
:
Here is my exact code (but quasi-identical to yours):
// pages/api/proxy/[...slug].js
import { createProxyMiddleware } from "http-proxy-middleware"; // @2.0.6
const proxy = createProxyMiddleware({
target: process.env.BACKEND_URL,
secure: false,
pathRewrite: { "^/api/proxy": "" }, // remove `/api/proxy` prefix
});
export default function handler(req, res) {
proxy(req, res, (err) => {
if (err) {
throw err;
}
throw new Error(
`Request '${req.url}' is not proxied! We should never reach here!`
);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.