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

Posted 2022-07-29 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 原创，允许转载，但转载必须保留首发链接。