对Spring RestController的React + Axios双POST请求(也在获取中，似乎不是选项) [英] React + Axios double POST request to spring RestController (also in fetch, seem not to be OPTIONS)
问题描述
我已经阅读了多个有关类似问题的帖子，但是我没有CORS问题(我不认为)，并且我的网络标签不显示第二个帖子是从客户端发送的
我正在使用Axios并对前端客户端做出反应，经过长时间的调试，我发现某些东西触发了我的RestController方法，总是触发两次，总是触发大约两分钟(这是一个很长的响应，响应时间为大量数据)
网络"标签上没有显示第二个POST，但是从邮递员处运行时，一切都按预期进行(没有随机两次通话)
Axios:
showCurrent = (dateA, dateB) => {
axios.post("api/allData", {
params: {
date_a: dateA,
date_b: dateB
}})
//successful fetch
.then(res => this.setState({
Data: res.data,
isLoading: false,
showPage: true,
home: false,
}))
.catch(function (error) {
//handle errors here
alert(error.message);
})
};
和requestMapping:
@RequestMapping(value = "/allData", method = RequestMethod.POST)
public @ResponseBody String allData(@RequestBody String req) throws JsonProcessingException {
CDate cDate = parseJSON(req);
ObjectMapper objectMapper = new ObjectMapper();
return objectMapper.writeValueAsString(DateRange.getDataForDateRange(date));
}
Controller类也具有@RestController批注
因此，如果我在不到2分钟的时间内执行查询，就可以了.但比这更长的时间，控制器将被调用两次，一切都变得一团糟.
如果需要，我可以添加更多代码.只是不确定如何进行调查.
在客户端和服务器端Java中添加了在执行该帖子的方法中添加的Console.log.
console.log("whaaat");
axios.post("api/allContracts", {
params: {
date_a: dateA,
date_b: dateB
}}).....
whaaat将只运行一次，而帖子将运行两次，并且端点将触发两次....
什么.....我还从单击到获取的每个步骤中都添加了console.log().
除了POST ...
即使与本机反应fetch也会发生相同的情况
showCurrent = (dateA, dateB) => {
console.log("whaaat");
let obj = {};
let params = {};
params.date_a = dateA;
params.date_b = dateB;
obj.params = params;
this.setState({isLoading: true});
fetch("api/allData", {
method: 'POST',
body: JSON.stringify(obj),
mode: 'cors',
}).then( res => {
return res.json()
}).then( data => {
this.setState({
Data: data,
isLoading: false,
showPage: true,
home: false,
})
}).catch(error => {
//handle errors here
alert(error.message);
});
仍然没有任何解决方案. 我阅读了有关印前检查OPTIONS请求的信息，但网络"标签上没有这样的东西. 我试图在不同的RequestMapping中处理OPTION请求，但是那个剂量甚至被触发了..
试图在服务器和客户端中都设置大约200万秒的超时时间，但该服务器似乎也无能为力. 邮递员没有这个问题，一切正常
以防万一有人在这里感到绝望.听到了，这全都与我的前端客户端中的代理有关...
经过几天的调试(带有非常误导性的错误消息) 我发现有一个话题在谈论如果存在代理
，nginx有时会重试获取proxy: {
'/api': 'http://localhost:8080'
}
删除此内容后，我得到了OPTIONS请求，正如预期的那样.
接下来，去拿啤酒.
I've read multiple posts about similar problems, but I don't have CORS problem (i don't think) and my network tab does not show second post being send from client
I'm using Axios and react for my front-end client and after a long time of debugging I found out that something is triggering my RestController method, always twice, always about two minutes in (it's a very long response with a huge amount of data)
Network tab does not show this second POST, but when ran from Postman, everything works as expected (no random double calls)
Axios:
showCurrent = (dateA, dateB) => {
axios.post("api/allData", {
params: {
date_a: dateA,
date_b: dateB
}})
//successful fetch
.then(res => this.setState({
Data: res.data,
isLoading: false,
showPage: true,
home: false,
}))
.catch(function (error) {
//handle errors here
alert(error.message);
})
};
and requestMapping:
@RequestMapping(value = "/allData", method = RequestMethod.POST)
public @ResponseBody String allData(@RequestBody String req) throws JsonProcessingException {
CDate cDate = parseJSON(req);
ObjectMapper objectMapper = new ObjectMapper();
return objectMapper.writeValueAsString(DateRange.getDataForDateRange(date));
}
Controller class also has @RestController annotation
So if i ran query taking under ~2min it will be ok. but longer than that and the controller will be called twice and everything goes haywire.
I can add more code if needed.. just not sure how to investigate this.
EDIT:
Added Console.log in method doing the post in the client, and in server-side Java.
console.log("whaaat");
axios.post("api/allContracts", {
params: {
date_a: dateA,
date_b: dateB
}}).....
whaaat will only be run once, while the post will be run twice and the endpoint will trigger twice....
EDIT2:
What the..... I also added console.log() to every step from click to fetch.
Nothing will trigger twice except for POST ...
even with reacts native fetch same will occur
showCurrent = (dateA, dateB) => {
console.log("whaaat");
let obj = {};
let params = {};
params.date_a = dateA;
params.date_b = dateB;
obj.params = params;
this.setState({isLoading: true});
fetch("api/allData", {
method: 'POST',
body: JSON.stringify(obj),
mode: 'cors',
}).then( res => {
return res.json()
}).then( data => {
this.setState({
Data: data,
isLoading: false,
showPage: true,
home: false,
})
}).catch(error => {
//handle errors here
alert(error.message);
});
EDIT 3: Still no solution whatsoever.... I read about preflight OPTIONS request, but there is no such thing on network tab. I tried to handle OPTION request in different RequestMapping but that dosent even get triggered....
Tried to put timeout of about 2 million sec in both server and client but that dosent seem to do anything either.. Postman does not have this problem, everything works fine
In case anyone wonders here full of desparation. hear hear, it was all about proxy in my front-side client...
After few days of debugging (with very misleading error messages) i found a thread talking about how nginx sometimes re-tries fetch if there is Proxy present
proxy: {
'/api': 'http://localhost:8080'
}
After removing this, i got OPTIONS request, as expected.
next up, fetching a beer.
这篇关于对Spring RestController的React + Axios双POST请求(也在获取中，似乎不是选项)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
