当前位置: 首页 > 后端技术 > Node.js

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

时间:2023-04-03 16:47:09 Node.js

有很多方法。这里仅举两个例子(修改nextconfig文件,使用express+http中间件)跨域问题解决本地开发dev环境1.next.config.js文件重写地址(实现跨域)module.exports={asyncrewrites(){return[//接口请求前缀为/api-text/{source:'/api-text/:path*',destination:`http://127.0.0.1:8080/:path*`},]},}2.Expresshttp-proxy-middleware中间件解决在根目录下创建server.js文件//server.jsconstexpress=require('express')constnext=require('next')const{createProxyMiddleware}=require('http-proxy-middleware')constdevProxy={'/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}}constport=parseInt(process.env.PORT,10)||3000constdev=process.env.NODE_ENV!=='production'constapp=next({dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{constserver=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){throwerr}console.log(`>Readyonhttp://localhost:${port}`)})}).catch(err=>{console.log(err)})修改package.json,添加内容"scripts":{"dev:node-middleware":"nodeserver.js",},在线配置nginx服务器转发接口实现跨域