nextjs处理在客户端请求数据时的跨域问题

问题：

next在客户端点击按钮获取数据时有个奇怪的现象，post请求不跨域，get会出现跨域的情况

参考文章

1.https://blog.csdn.net/sinat_39415600/article/details/120494152
2.https://www.cnblogs.com/stardust233/p/12193833.html
注：参考文章中的是老版本， http-proxy-middleware的新版用法有变。

一、安装插件

yarn add express http-proxy-middleware

"http-proxy-middleware": "^2.0.1",

二、新建文件server.js

在项目根目录下新建 server.js 文件，写入以下代码;
注意：http-proxy-middleware 新版本的用法变了，请参考我的写法，否则会报错

// server.js
const express = require('express')
const next = require('next')
// http-proxy-middleware 新用法1
const { createProxyMiddleware } = require('http-proxy-middleware')

const devProxy = {
  '/api': {
    target: 'https://api.mmmvip.vip/', // 端口自己配置合适的
    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) {
        // http-proxy-middleware 新用法2
        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('An error occurred, unable to start the server')
    console.log(err)
  })

三、修改package.json

"scripts": {
    "dev": "node server.js",
    "dev:prod": "APP_ENV=production next dev",
    "build:test": "APP_ENV=test next build",
    "build:prod": "APP_ENV=production next build",
    "start": "next start",
    "lint": "next lint"
  },

四、页面中使用

根据webpack中常见的用法使用,就可以了，例如

http://localhost:3000/api/o/oms/goods/categorylist

总结

注意版本差异，有报错时及时查看官方包中新的用法；