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服务器转发接口实现跨域即可

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容