最近用create-react-app脚手架搞前后台分离,遇到了一推bug,解决方案如下!
1、跨域
跨域问题网上有很多帖子,但是用针对create-react-app的脚手架的却很少,试了很多方法都没有成功。最后,找到了react-scripts 的文档,配置了proxy,使用代理服务器终于可以了,github文档那个地址https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md。
我的配置如下:
1、打开package.json
2、fetch的使用
安装fetch:
npm install whatwg-fetch --save
get请求
fetch('/queue/confirmqueue, {
}).then(function(response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('获取时间出错');
});
post请求
fetch('/queue/update', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: 1,
eatNumber:4,
seatFlag: false
})
}).then(function(response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('获取时间出错');
});
开开心心的撸好了从前台到后台的代码,结果一测试,后台接收不到数据,找了半天发现只有表单提交才能收到,这怎么能行,我们一般都用json传,表单好麻烦,最后发现在后台定义post请求的时候加上@RequestBody即可,如图:
终于调通了,喜欢就请点了赞呗!