next.js 如何配置接口代理 proxy

Posted 2021-08-31 FungLeo

next.js 配置接口代理 proxy

最近有一个小项目，打算使用 next.js 框架来做。这是我第一次使用该框架，没有太多的经验。按照官方的方法，初始化好项目，然后就能跑起来了。

但是，我需要配置一下代理，用以请求数据，百度了一下，搞不起来，可能是因为资料版本比较老旧的原因。在 google 上搜索了一下，顺利解决了这个问题。因此撰文记录一下。

安装所需依赖

npm install express http-proxy-middleware -D

有 nodejs 基础的话，可以看到，这两个依赖是非常熟悉的，express 是常用的 web 服务框架。而 http-proxy-middleware 是代理中间件。

编写 server.js

在项目根目录下，创建 server.js 文件，并录入以下代码：

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'
// 初始化 app
const app = next({ dev })
const handle = app.getRequestHandler()

// 代理配置表，这里和一般的 webpack 配置是一样的。
const proxyTable = {
  '/api': {
    target: 'http://127.0.0.1:4000',
    pathRewrite: {
      '^/api': '/api'
    },
    changeOrigin: true
  }
}

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

  // 如果是开发环境，则代理接口
  if (dev) {
    server.use('/api', createProxyMiddleware(proxyTable['/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)
})

配置运行脚本

编辑 package.json, 将 script 部分内容，替换成以下：

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

OK，到此为止，我们的代理就配置好了，然后我们运行 npm run dev 即可访问我们代理到的接口了。

接口服务不在本文讨论范围内。

通过命令行，我们可以请求到我们代理的接口了。接下来，我需要研究一下，如何在代码中请求接口，如果有值得记录的内容，我会继续编写博文的。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。