react setupProxy.js导致项目无法启动的解决
作者:苦夏木禾
这篇文章主要介绍了react setupProxy.js导致项目无法启动的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react setupProxy.js导致项目无法启动
如果是因为添加了setupProxy.js导致项目无法启动,检查此文件中的如下内容:
低版本 http-proxy-middleware
const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装 module.exports = function(app){ app.use( proxy('/api',{ //遇见/api1前缀的请求,就会触发该代理配置 target:'http://localhost:5000', //请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host的值 pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释 }), proxy('/api2',{ target:'http://localhost:5001', changeOrigin:true, pathRewrite:{'^/api2':''} }), ) }
高版本 http-proxy-middleware
const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装 module.exports = function(app){ app.use( proxy.createProxyMiddleware('/api',{ //遇见/api1前缀的请求,就会触发该代理配置 target:'http://localhost:5000', //请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host的值 pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释 }), proxy.createProxyMiddleware('/api2',{ target:'http://localhost:5001', changeOrigin:true, pathRewrite:{'^/api2':''} }), ) }
版本如果是2以上就算是高版本,尤其是最新的项目
配置setupProxy.js代理,页面报错404问题
遇到了一个问题,就是更换解决跨域问题方式时,配置setupProxy.js代理后,可以正常启动,但是报404访问不到页面。
原因是:
// setupProxy.js const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api/**', { //`api`是需要转发的请求 target: 'http://127.0.0.1:8083', // 这里是接口服务器地址 changeOrigin: true, }) ) }
更改为
// setupProxy.js const {createProxyMiddleware} = require('http-proxy-middleware') module.exports = function(app) { app.use( createProxyMiddleware('/api/**', { //`api`是需要转发的请求 target: 'http://127.0.0.1:8083', // 这里是接口服务器地址 changeOrigin: true, }) ) }
即可~~~~
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。