解决create-react-app下跨域、fetch的post请求接收不到数据

最近用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

image.png

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即可,如图:

image.png

终于调通了,喜欢就请点了赞呗!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,200评论 4 61
  • 1、Qtum量子链创始人帅初入选2017年《福布斯》中国30位30岁以下精英榜 2017年7月20日,福布斯中国在...
    U呀UI小饼阅读 288评论 0 0
  • 一早来到医院。时间尚早,和先生医院旁边吃了早餐。八点即到病房门口,已经有十几个家长站在那里了。看着小窗囗里的医护人...
    洋头阅读 279评论 0 0
  • 一個APP的誕生記 今日工作: 1.加載過場動畫 總結:本來想使用HUD的 但是發現我不會搞 試了挺多方法 估計還...
    MissFortune阅读 215评论 0 0