问题:
next在客户端点击按钮获取数据时有个奇怪的现象,post请求不跨域,get会出现跨域的情况
参考文章
1.https://blog.csdn.net/sinat_39415600/article/details/120494152
2.https://www.cnblogs.com/stardust233/p/12193833.html
注:参考文章中的是老版本, http-proxy-middleware的新版用法有变。
一、安装插件
yarn add express http-proxy-middleware
"http-proxy-middleware": "^2.0.1",
二、新建文件server.js
在项目根目录下新建 server.js 文件,写入以下代码;
注意:http-proxy-middleware 新版本的用法变了,请参考我的写法,否则会报错
// server.js
const express = require('express')
const next = require('next')
// http-proxy-middleware 新用法1
const { createProxyMiddleware } = require('http-proxy-middleware')
const devProxy = {
'/api': {
target: 'https://api.mmmvip.vip/', // 端口自己配置合适的
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) {
// http-proxy-middleware 新用法2
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('An error occurred, unable to start the server')
console.log(err)
})
三、修改package.json
"scripts": {
"dev": "node server.js",
"dev:prod": "APP_ENV=production next dev",
"build:test": "APP_ENV=test next build",
"build:prod": "APP_ENV=production next build",
"start": "next start",
"lint": "next lint"
},
四、页面中使用
根据webpack中常见的用法使用,就可以了,例如
http://localhost:3000/api/o/oms/goods/categorylist
总结
注意版本差异,有报错时及时查看官方包中新的用法;