最近在学习react中,使用axios发送post请求,后台一直获取不到数据,十分困扰,百度下react 跨域或者react 跨域设置,得到的答案五花八门,有的说要配置web-package的tableProxy ,有的说要用fetch 也有人说要用axios ,当然这都是对的,但是这里有个误区,为什么有的fetch可以,有的axios可以,而且根本不需要react 或者vue额外的配置。

 

首先:我们在后台程序中设置的跨域,采用的是过滤器Filter ,设置如下:

按照以往的经验,采用ajax发送异步请求,然后dataType=jsonp即可,可是这次因为使用的react,当然也可以使用ajax,既然已经使用了react,有就是ES6,那么就不要用以往的老办法了,但是很困扰我。后台可以接受到请求,但是就是没有数据,怎么办,思索中,

这个时候我注意到一个细节,什么?参数不是在Http Header中,payload又是什么鬼,于是我查了下payload是何方神圣,

所谓的payload,http协议中Content-type为application/x-www-form-urlencoded,这个application/x-www-form-urlencoded会将参数绑定到请求体之中,所以我们必须在后台中指定在请求体中,获取参数,而java中sringMvc采用的@RequestBody注解,但是后台报错,不过这个报错却给我了很多提示非常有用,

提示不支持application/x-www-form-urlencoded方式,那么就好办了,那你支持什么格式,text/plan ?显然也不是,那么久只有试一试appliation/json了,不过还是报错,不过没关系在后面加上;charset=UTF-8 就可以了

所以说react或者vue这种前端框架,在跨域的问题不需要做任何额外的配置,这也让想起了,之前在喝前端联调的时候,使用postMan发送请求的时候,为什么都采用raw的格式,很可能就是其它的格式不支持啊。时间有限,文笔有限,请多体谅

 

 

Logo

前往低代码交流专区

更多推荐