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

上一个章节中，讲解了next下如何通过axios获取远程数据，可是遇到了跨域的问题，所以单独写个文章讲解一下，如何在开发模式dev下面，解决跨域，没有使用跨域代理之前

下面开始讲解如何跨域
首先，打开我们的koa项目，启动，用koa来作为后台接口模拟数据

以上都准备好，浏览器访问http://localhost:3333/api/list，没有问题后作为我们的模拟数据

好，正式开始配置~~~~~~~~~~~~~~~~~~~~~~~~~~
打开Next项目
1:安装跨域的依赖中间包 http-proxy-middleware

cnpm  install express next  http-proxy-middleware --save

2：根目录下面新建server.js
//server.js

// server.js
const express = require('express')
const next = require('next')
const proxyMiddleware = require('http-proxy-middleware')

const devProxy = {
    '/api': {
        target: 'http://localhost:3333/api/', // 端口自己配置合适的
        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)
    })

ps：target一定要修改为http://localhost:3333/api/，而不是’http://localhost:3333，否则就会404，我这里就搞错了
3：修改package.json
//package.json

 "dev": "node server.js",

4:使用
//pageA.js

pageA.getInitialProps= async ()=>{
	//let api = "http://localhost:3333/api/list";
	let api = "/api/list";
	const  result  =  new  Promise((resolve)=>{
			axios(api).then(res=>{
				console.log(res);
				resolve(res.data.data)
			}).catch(err=>{
				console.log(err);
			});
	});
	return await result;
}

可以看到前面的前缀就不需要啦，直接加地址就好了
效果图

OK，成功跨域