使用默认 Next.js 开发服务器代理到后端

Question

之前，当我使用 create-react-app 制作应用程序时，我会有一个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 开发服务器完成像上面这样的代理呢？ （当我的 package.json 中的dev是next dev时，相当于npm run dev dev 。

Answer 1

现在在配置中有一个官方特性：重写

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

next.config.js ：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/:path*' // Proxy to Backend
      }
    ]
  }
}

请参阅Next.js 文档重写

Answer 2

我的server.js已设置，希望对您有所帮助：

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.json ：

"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",
},

Answer 3

重写对我不起作用，使用 axios config.proxy也不起作用。

我采用了一个很好的旧常量：

const SERVER_URL = 
  process.env.NODE_ENV === 'production' ? 'https://produrl.com : 'http://localhost:8000';

export async function getStaticProps() {
  const data = axios.get(`${SERVER_URL}/api/my-route`)
  // ...
}

我更愿意代理请求并保持我的请求更干净，但我没有一天时间与这个搏斗。

也许这个非常简单的设置会对其他人有所帮助。

Answer 4

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

https://github.com/zeit/next.js/tree/master/examples/with-custom-reverse-proxy

Answer 5

另一种具有包罗万象的路由+ http-proxy-middleware解决方案：

// 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!`
    );
  });
}

见： https ://stackoverflow.com/a/72310680