React + Axios 对 spring RestController 的双重 POST 请求(也在 fetch 中，似乎不是 OPTIONS)

本文介绍了React + Axios 对 spring RestController 的双重 POST 请求(也在 fetch 中，似乎不是 OPTIONS)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经阅读了多篇关于类似问题的帖子，但我没有 CORS 问题(我不认为)，并且我的网络标签 没有显示第二个帖子是从客户端发送的

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

我正在使用 Axios 并为我的前端客户端做出反应，经过长时间的调试后，我发现某些东西触发了我的 RestController 方法，总是两次，总是大约两分钟(这是一个非常长的响应，带有海量数据)

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)

网络选项卡不显示第二个 POST，但是当从 Postman 运行时，一切正常(无随机双重调用)

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); }) };

和请求映射:

@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 注解

Controller class also has @RestController annotation

因此，如果我在约 2 分钟内运行查询就可以了.但比这更长，控制器将被调用两次，一切都变得混乱.

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.

在客户端和服务器端 Java 中添加了 Console.log 方法.

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 只会运行一次，而 post 会运行两次，并且端点会触发两次......

whaaat will only be run once, while the post will be run twice and the endpoint will trigger twice....

什么.....我还在从点击到获取的每个步骤中添加了 console.log().除了 POST ...

What the..... I also added console.log() to every step from click to fetch. Nothing will trigger twice except for POST ...

即使使用 reacts native fetch 也会发生同样的情况

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); });

编辑 3:仍然没有任何解决方案......我阅读了有关预检选项请求的信息，但网络选项卡上没有这样的内容.我试图在不同的 RequestMapping 中处理 OPTION 请求，但那个剂量甚至被触发了......

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....

试图在服务器和客户端都设置大约 200 万秒的超时时间，但那个剂量似乎也可以做任何事情..Postman 没有这个问题，一切正常

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': 'localhost:8080' }

删除后，我收到了 OPTIONS 请求，正如预期的那样.

After removing this, i got OPTIONS request, as expected.

接下来，去拿啤酒.