React中proxy报错问题


When specified, “proxy” in package.json must be a string.
Instead, the type of “proxy” was “object”.
Either remove “proxy” from package.json, or make it a string.

配置React跨域时候

在网上看到是这样配置的,在package.json里添加如下代码

"proxy": {
  "/api": {
    "target": "http://localhost:5000"
    },
  
}

但是启动项目却报上面那个错误

以为我哪里写的不对,一个一个字对比,发现没毛病啊

于是在网上搜了下错误代码

在Facebook官方github里看到了

原来React新版本不支持那样设置反向代理了

新版本需要这样做

安装http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

然后

在创建一个setupProxy.js文件,在src目录,src/setupProxy.js

例如之前的配置

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

setupProxy.js文件里则这样写

const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}

完整的写法

app.use(proxy('/api', { 
target: 'https://localhost:5000/',
changeOrigin:true,
pathRewrite: {
            "^/api": "/"
        }
 }))

更多问题看:https://github.com/facebook/create-react-app/issues/5103

参考地址:https://www.blyoo.com/4007.html

但是我发现,依然不行,有大佬能帮我解决一下吗?。。。。

最终我还是在node上写了CORS才成功。。o(╥﹏╥)o
如何使用CORS跨域?=》https://mp.csdn.net/mdeditor/92245470#

发布了18 篇原创文章 · 获赞 2 · 访问量 4075
展开阅读全文

跨域请求:Proxy error: Could not proxy request 时不时的报这个错误,不知道为啥?

02-12

最近在做毕设,前端用的react,后台是node+express+mongodb,接口都写 好了,postman测试也没问题,因为项目里有聊天的功能,所以加入了websocket 进行即时聊天,后台的接口是locahost:4000,socket也是,可就在调接口的时候 浏览器一直报Proxy error,前期一直以为跨域设置的问题,看了很多文档,试了 很多,感觉应该不是跨域的问题,后来又去查是不是端口被占用,发现4000端口 就是我用的浏览器和node在占用,没有别的程序占用,停止了再重启服务器和 客户端还是没用, 重点来了:1.每次开机时,启动项目后,数据调用一切正常 可只要我退出登录再重新登录的时候,就又有很多的500错误proxy error; 2.就是当我某个用户在浏览器上一直处于登录着的状态时,过一段时间后,它就又可以愉快的调数据了,无报错 我试过把后台的连接socket的端口改为了5000,还是不行,我感觉可能是重新登录后,项目是不是又重新连接了服务器啥的,导致端口被占用,所以总是报500 错误,想问下各位大佬,有没有遇到过这种问题,总结一下就是:接口时好时坏, 总是有proxy error的错误,难受我好几天了。。。个人感觉不是前端跨域的问题,求各位大佬出来帮小弟 指点迷津啊,在此感激不尽啊!!! ![图片说明](https://img-ask.csdn.net/upload/202002/12/1581490300_538416.png) ![图片说明](https://img-ask.csdn.net/upload/202002/12/1581490314_869475.png) 问答

reactjs无法连接后台:Could not proxy request xxx from localhost:3000 to http://localhost:8080/

11-06

package.json写了“proxy”:"http://localhost:8080" 下面是App.js里component StaffList.js代码,cnpm start后console显示异常: Proxy error: Could not proxy request /api/staffs from localhost:3000 to http://localhost:8080/. 另外页面报错: Unhandled Rejection (SyntaxError): Unexpected token P in JSON at position 0 出错是这一句: .then(response => response.json()) 应该是连接不到后台的Controller?毫无头绪,应该怎么解决?谢谢了!! ``` class StaffList extends Component { constructor(props) { super(props); this.state = {staffs: [], isLoading: true}; this.remove = this.remove.bind(this); } componentDidMount() { this.setState({isLoading: true}); fetch('api/staffs') .then(response => response.json()) .then(data => this.setState({staffs: data, isLoading: false})); } async remove(id) { await fetch(`/api/staff/${id}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(() => { let updatedStaffs = [...this.state.staffs].filter(i => i.id !== id); this.setState({staffs: updatedStaffs}); }); } render() { const {staffs, isLoading} = this.state; if (isLoading) { return <p>Loading...</p>; } const staffList = staffs.map(staffManagement => { return <tr key={staffManagement.id}> <td style={{whiteSpace: 'nowrap'}}>{staffManagement.name}</td> <td> <ButtonGroup> <Button size="sm" color="primary" tag={Link} to={"/staffs/" + staffManagement.id}>Edit</Button> <Button size="sm" color="danger" onClick={() => this.remove(staffManagement.id)}>Delete</Button> </ButtonGroup> </td> </tr> }); return ( <div> <AppNavbar/> <Container fluid> <div className="float-right"> <Button color="success" tag={Link} to="/staffs/new">Add Staff</Button> </div> <h3>Staff Management</h3> <Table className="mt-4"> <thead> <tr> <th width="20%">Name</th> <th width="20%">Department</th> <th>Position</th> <th width="10%">Permission</th> </tr> </thead> <tbody> {staffList} </tbody> </Table> </Container> </div> ); } } export default StaffList; ``` 问答

npm问题'Path must be a string

12-08

> app@1.0.0 dev D:\work\qk\app > node build/dev-server.js [HPM] Proxy created: /api -> http://xxx.xxx.x.xxx [HPM] Proxy rewrite rule created: "^/api" ~> "/api" path.js:7 throw new TypeError('Path must be a string. Received ' + inspect(path)); ^ TypeError: Path must be a string. Received undefined at assertPath (path.js:7:11) at Object.join (path.js:1211:7) at Object.<anonymous> (D:\work\qk\app\build\dev-server.js:57:29) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) at Function.Module.runMain (module.js:575:10) at startup (node.js:160:18) at node.js:449:3 npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" npm ERR! node v6.2.0 npm ERR! npm v3.8.9 npm ERR! code ELIFECYCLE npm ERR! app@1.0.0 dev: `node build/dev-server.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the app@1.0.0 dev script 'node build/dev-server.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the app package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node build/dev-server.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs app npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls app npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! D:\work\qk\app\npm-debug.log 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览