Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

飞翔吧星尘龙 2020-01-14 20:03:00 阅读数:16 评论数:0 点赞数:0 收藏数: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)
版权声明
本文为[飞翔吧星尘龙]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/stardust233/p/12193833.html