Next.js 配置接口跨域代理转发

Dear 丶 2023-10-13 18:41 11阅读 0赞

## 一、使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能。 ##

先安装好 express 和 http-proxy-middleware

yarn add express http-proxy-middleware

## 二、在项目根目录下新建 server.js 文件，写入以下代码 ##

// server.js
    const express = require(‘express‘)
    const next = require(‘next‘)
    const proxyMiddleware = require(‘http-proxy-middleware‘)
    
    const devProxy = {
        
        ‘/api‘: {
        
            target: ‘http://localhost:8000‘, // 端口自己配置合适的
            pathRewrite: {
        
                ‘^/api‘: ‘/‘
            },
            changeOrigin: true
        }
    }
    
    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()
    
            if (dev && devProxy) {
        
                Object.keys(devProxy).forEach(function(context) {
        
                    server.use(proxyMiddleware(context, devProxy[context]))
                })
            }
    
            server.all(‘*‘, (req, res) => {
        
                handle(req, res)
            })
    
            server.listen(port, err => {
        
                if (err) {
        
                    throw err
                }
                console.log(`> Ready on http://localhost:${
          port}`)
            })
        })
        .catch(err => {
        
            console.log(‘An error occurred, unable to start the server‘)
            console.log(err)
        })

## 三、相应地修改 package.json ##

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

如下，所有接口以 /api 开头即可。

const {
         data } = await axios.post(‘/api/users/‘, options)