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

痛定思痛。 2022-09-02 15:59 663阅读 0赞

# 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` 即可访问我们代理到的接口了。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Z1bmdMZW8_size_16_color_FFFFFF_t_70]  
通过命令行，我们可以请求到我们代理的接口了。接下来，我需要研究一下，如何在代码中请求接口，如果有值得记录的内容，我会继续编写博文的。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Z1bmdMZW8_size_16_color_FFFFFF_t_70]: /images/20220829/bd30487d3f9342829a6df834ae953616.png