likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 26
方法有很多这里只列举两例(修改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服务器转发接口实现跨域即可