nextJS axios 跨域

一缕微风
发布于 3 月 3 日
方法有很多这里只列举两例(修改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服务器转发接口实现跨域即可

dev 开发亲测有效
转link