方法有很多这里只列举两例(修改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",
},
