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

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

跨域解决问题
本地开发dev环境 【nextjs-react，解决前端跨域问题】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，添加一则内容