Javascript 使用默认的Next.js dev服务器代理到后端

以前，当我使用createreact应用程序创建应用程序时，我会有一个

setupProxy.js

文件，该文件将路由类似于此的API请求

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use('/api',
        proxy({
            target: 'http://localhost:8000',
            changeOrigin: true,
        })
    );
};

但这似乎不适用于next.js。当我做同样的事情时，我会遇到各种各样的错误

---

谷歌搜索一个解决方案，很多人说使用某种定制服务器。但是，如何使用默认的nextjs开发服务器实现上述代理呢？（相当于当我的包中的

dev

是

next dev

myserver.js设置时，

npm运行dev

，希望对您有所帮助

import express from 'express';
import next from 'next';
import proxy from 'http-proxy-middleware';

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = express();

    server.use(
        '/api',
        proxy({
            target: process.env.API_HOST,
            changeOrigin: true,
        }),
    );

    server.all('*', (req, res) => handle(req, res));

    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`);
    });
});

package.js

"scripts": {
    "dev": "NODE_ENV=development node -r esm server.js",
    "build": "NODE_ENV=production next build",
    "start": "NODE_ENV=production node -r esm server.js",
},

---

最终使用了与发布内容类似的内容。从这里使用了配置文件

---

配置中现在有一个官方功能：重写

除了正常的路径重写外，它们还可以将请求代理到另一个Web服务器

next.config.js:

module.exports={
异步重写（）{
返回[
{
来源：'/api/：path*'，
目的地：'http://localhost:8000/:path*“//代理到后端
}
]
}
}

---

请参见

重写对我不起作用，使用axios

config.proxy也不起作用

我求助于一个很好的老生常谈：

const服务器\u URL=
process.env.NODE_env===“生产”？”https://produrl.com : 'http://localhost:8000';
导出异步函数getStaticProps（）{
const data=axios.get（`${SERVER\u URL}/api/my route`）
// ...
}

我更愿意代理请求并保持我的请求更干净，但我没有一天时间来处理这个问题

也许这个非常简单的设置会帮助其他人。
NODE_ENV=development NODE-r esm server.js
如果使用
require
则
const{createproxymeditore}=require（'http-proxy-middleware'）；
导入{createproxymeditore}从“http代理中间件”中，我也做了
node server.mjs
，并删除了所有ESM自定义的malarkey。node 15在mjs文件中与ESM一起很好地播放：）嗨，你这样做了吗？我做了ti，构建/节点太长了。当我需要WebSocket代理时，这个无法工作。握手失败。@nemishzalavadiyaneel socket.io使用重写也不适用于我。。。你能找到一个不涉及创建自定义服务器的解决方案吗？我仍然不能。我正在创建
const
对象并将硬编码的URL存储在那里。如果您找到任何解决方案，请与我们分享。我相信
只会重写
基本的代理设置。需要更多代理配置来设置自定义服务器