【nextjs dev解决跨域问题】

勤奋的小码农98

于 2022-09-28 18:09:38 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： share 文章标签：前端 node.js

本文链接：https://blog.youkuaiyun.com/qq_39177417/article/details/127094362

share 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Node.js与Next.js环境中配置跨域代理，通过使用http-proxy-middleware中间件实现本地开发环境的API请求转发，具体步骤包括安装依赖、设置server.js文件及调整package.json。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装插件 yarn add express http-proxy-middleware
2、根目录下方添加文件 server.js : 内容如下

// server.js
const express = require('express')
const next = require('next')
const  { createProxyMiddleware }  = require('http-proxy-middleware')
const devConfig = require('./devConfig')

const devProxy = {
    '/api': {
        target: devConfig.proxyUrl, // 端口自己配置合适的
        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(createProxyMiddleware(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(err)
    })