使用 create-next-app 建立的 Next.js 項目配置接口跨域代理轉發須要用到 custom server 功能。
先安裝好 express 和 http-proxy-middlewarenode
yarn add express http-proxy-middleware
在項目根目錄下新建 server.js 文件,寫入如下代碼ios
// 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.jsonweb
"scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" },
以下,全部接口以 /api
開頭便可。express
const { data } = await axios.post('/api/users/', options)