nextjs-react，解决前端跨域问题

方法有很多这里只列举两例(修改nextconfig文件和使用express+http中间件)

跨域解决问题

本地开发dev环境

1、 next.config.js文件 重写地址(实现跨域)

module.exports = {

  async rewrites() { 
    return [ 
     //接口请求 前缀带上/api-text/
      { source: '/api-text/:path*', destination: `http://127.0.0.1:8080/:path*` }, 

    ]
  },
  }

2、 express http-proxy-middleware 中间件解决

• 根目录下创建server.js文件

  // server.js
  const express = require('express')
  const next = require('next')
  const  { createProxyMiddleware }  = require('http-proxy-middleware')
  const devProxy = {
    '/api-text': {
        target: 'http://127.0.0.1:8080/', // 端口自己配置合适的
        pathRewrite: {
            '^/api-text': '/'
        },
        changeOrigin: true
    },
    '/api': {
        target: 'http://127.0.0.1:3000/', // 端口自己配置合适的
        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)
    })

• 修改package.json，添加一则内容

"scripts": {
    "dev:node-middleware": "node server.js",
  },

线上配置nginx服务器转发接口实现跨域即可