记一次解决前端websocket调用后台失败报404

最新推荐文章于 2024-11-14 15:32:01 发布
原创 最新推荐文章于 2024-11-14 15:32:01 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jar

本文记录了一次解决前端WebSocket调用后台失败，出现404错误的经历。问题出现在心跳连接上，通过检查前后端代码，发现是IDEA配置问题。在IDEA中，将websocket-api.jar的适用范围从Compile更改为Provide，解决了问题。同时，清理已编译的代码和artifacts也是关键步骤。
部署运行你感兴趣的模型镜像

正常心跳（3s一次）：

失败心跳

前端：

后端：

解决方案：

我用的是idea 2020社区版，所以，是在idea里进行配置的

按快捷键ctrl + shift + alt + s 或者是点击下图中“A”处，打开窗口，将websocket-api.jar 的适用范围由Compile改为Provide，ok，解决问题。（如果是maven的话，应该是改jar的scope属性）

 

一定要记得删除掉已经编译的代码和创建的artifacts

 

 

 

 

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

【WebSocket】解决WebSocket 服务器部署出现404问题
全力奔跑，梦在彼岸
02-17 2万+
前言      最近项目中有端对端通信场景，实时性要求较高，考虑后选用了websocket 这一通信协议，本地做了个demo测试，跑的好好的，部署到测试服务器上，出现了客户端连接服务端时提示404的问题，下面来看下。 正文 问题描述 本地客户端程序简单写了个html,连接到服务端成功后的页面如下 将服务端代码部署到测试服务器上，想跟另一端做联调测试，部署完...
关于websocket连接报404的问题
spt_dream的博客
07-11 1917
问题描述及解决方法 Q&A 问题描述及解决方法 项目中遇到websocket连接报404的问题，由于项目是有nginx的,首先检查nginx是否开启了websocket穿透，如下面代码展示： location / { proxy_pass http://entertain.sbc.com/xpe-products-sbc-entertain/; proxy_cookie_p...
2.4-使用idea开发javaWeb应用程序-2（后台接口）
川流不息
01-03 3044
使用idea开发javaWeb应用程序-编写后台代码 回到第一章：目录 文章目录使用idea开发javaWeb应用程序-编写后台代码前言一、编写后台代码 前言 上一节编写了：FirstJavaWeb 的3个前端页面： 点login.html页面里的登录按钮后直接调转到了主页面main.jsp。 这一节来编写后台代码。实现：点击login.html页面的登录按钮后，先访问后台/login方法，后台接受到参数并打印，然后由后台跳转到主页main.jsp。 一、编写后台代码 1、在pom.xml文件
Spring websocket浏览器连接时出现404错误
anchichun6550的博客
02-12 974
1、场景 在用websocket做一个简单的数据导入页面同步显示后台进度功能的时候，浏览器出现连接不上的错误： WebSocket connection to 'ws://localhost:8080/project/marco' failed: Error during WebSocket handshake: Unexpected response code: 404 网上有很种导致...
WebSocket报404错误
wang5701071的博客
08-25 9163
java做WebSocket后台处理,发现前端请求一直404. 最后发现是SpringBoot的问题. SpringBoot使用WebSocket的时候需要额外注意几点. 1:引入与boot相关的WebSocket依赖,如果引入其他WebSocket依赖会导致无法配置WebSocketConfig <dependency> <groupId>org.springframework.boot</groupId> &..
前端 webSocket 的使用
lzfengquan的博客
02-19 1771
例子：现在需要根据用户不同的输入来获取后端不同的数据，http请求的方式就是每次用户输入我就发送一个http请求。然而websocket的解决是一次连接成功后，每次用户输入都会发送给后台，但是这个发送的数据却是一直处在已经连接的状态，并不是每次想http每一次都是一次新的连接。结合上述用法可以自行封装（不一定适用你的项目，不过大致逻辑就是这样）webSocket使用。
websocket实现前后台数据更新
05-31
1、前端页面 UI01.HTML 页面，采用echarts折线图、柱状图、饼图、仪表盘等显示形式，展示后台发送的数据； 2、javascript websocket.js，websocket页面使用javascript文件，定义.onopen、onmessage、onclose、on...
前端调用麦克风获取实时音频流和录音并上传至后台
05-11
文件分为两个，一个是实时获取音频流的文件，另一个是录音并上传至后台的文件，建议都在服务器环境下打开，这两天从网上整理的，希望对大家有所启发。
springboot整合WebSocket：后台服务主动发送信息给前端客户端
leomoon
02-25 4779
1.前端websocket开启方法 // WebSocket接收消息推送 openSocket() { if (typeof WebSocket == "undefined") { console.log("您的浏览器不支持WebSocket"); } else { var socketUrl = `http://localhost:8080/ws/` + this.user.id; socketUrl = socket
前端websocket与php后台连接
wuyouxiaoli的博客
02-25 214
HTTP协议的特性：属于“请求-响应”模型，只有客户端发起了请求消息，服务器才能给出响应消息，没有请求，就没有响应；一个请求消息，服务器只能返回一个响应消息。有些特殊应用场景中，如“在线股票”、“聊天室”等，需要模拟呈现出“客户端不发请求，服务器也在不停的给出响应”效果，若使用HTTP协议，只能使用“AJAX+定时器”来近似的实现——心跳请求，问题：心跳过慢则信息的实效性差，心跳过快则服务器压力太大！ WebSocket协议的特性：属于“广播-收听”模型，只要客户端连接到服务器上，就不再断开（永久连接），
前端WebSocket 引用以及使用，测试以及解决404问题
qq_37228798的博客
06-04 1525
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
WebSocket连接404（一种情况）
热门推荐
一丛小溪的博客
05-14 1万+
第一种情况 原因：这里是因为url的路径写错了，请仔细检查是否路径写错了（楼主这里忘了在端口号后面加上项目发布名了） 第二种情况 上一种情况，我使用的是SSM框架，后来想用Spring Boot来尝试一下，结果发现按照原来的写法无法连接。如果你使用的是Spring Boot请检查如下配置 声明将@ServerEndPoint的注解交由Spring管理 package com.yunx...
Spring websocket 404
Rico_Yip
04-16 512
Spring中的websocket框架必须要走Springmvc中的分发器，所以请把web.xml中的映射改成 / &lt;servlet-mapping&gt; &lt;servlet-name&gt;springmvc&lt;/servlet-name&gt; &lt;url-pattern&gt;/&lt;/url-pattern&gt; &...
关于WebSocket连接报404的问题
weixin_45168084的博客
08-25 1873
关于WebSocket连接报404的问题 我的项目解决办法是：我是用springboot内置的Tomcat启动的(这种方式出现的问题多)，所以在代码里少了这个配置文件 @Configuration public class WebSocketConfig { /** * ServerEndpointExporter 作用 * * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint * * @
java websocket 404_Websocket @serverendpoint 404
weixin_33228769的博客
02-13 1477
今天写一个前后端交互的websocket ， 本来写着挺顺利的，但测试的时候蒙了，前端websocket发的连接请求竟然连接不上返回状态Status 报了个404 ，然后看后台onError方法也没触发只是报了下面几条警告信息WARN o.s.web.servlet.PageNotFound | No mapping for GET /websocket/***WARN o.s.web.serv...
WebSocket Error: Incorrect HTTP response. Status code 404, Not Found
hch的博客
08-26 4099
今天调试一下webSocket，重前端到后台，但是出现了一个错误： WebSocket Error: Incorrect HTTP response. Status code 404, Not Found， 这里我初始化代码如下，运行的时候，出现上面那个错误，我查看了一下，主要是ws = new WebSocket(target); 这里连不通服务器的代码，但是这个地址又是对的，搞了很久，才...
JAVA：SpringBoot中使用websocket出现404问题
奋斗鱼
09-25 2453
分析后发现，服务器环境与本地环境的主要区别是服务器上使用了nginx代理中转，需要进行以下配置，否则会报404错误。#超过7200秒内没通讯则断开。在Springboot中使用websocket时，本地开发环境可以正常运行，但部署到服务器环境出现404问题。#websocket 主要配置。配置完重启ngnix服务，运行正常了。
Spring boot集成WebSocket 出现404问题，访问不到，Initializing Spring DispatcherServlet ‘dispatcherServlet‘
sx40623746的博客
11-14 968
spring boot集成WebSocket后发现咋都请求不到，日志输出只有一行 把项目的日志等级改成了 级别后，日志输出如下 摘取关键代码就是404，找不到路径 解决方法如下 1、在WebSocketServer类中更改如下 新增了2、然后在WebSocketConfig中新增 源码如下： WebSocketConfig.java WebSocketInterceptor.java MyWebSocketHandler.java WebSocketServer.java
前端页面请求超过一分钟后页面报404
最新发布
03-21
<think>好的，我现在需要解决用户的问题：前端页面请求超时后返回404的问题。用户希望找到解决方案。首先，我得理清问题的具体情况。 根据用户提供的引用，前端发送请求后，如果后台处理时间过长（比如超过60秒），前端控制台会显示请求被取消（canceled），这导致用户最终遇到404错误。可能的情况是，前端在超时后自动取消请求，而后台可能还在处理，当用户再次尝试访问时，可能资源未准备好，导致404。或者，后台处理失败，返回了404。 首先，我需要分析问题产生的原因。引用[1]提到前端请求在60秒后取消，引用[2]和[3]讨论了后台处理时间过长导致前端超时的问题，解决方案包括异步处理和轮询。引用[4]则提到请求超时的机制。用户现在遇到的是超时后返回404，这可能是由于前端在超时后重试，但资源未生成，或者后台处理失败。 可能的解决方向有几个： 1. 后台优化：减少处理时间，避免超时。但有时处理时间长是不可避免的，比如复杂计算或第三方调用。这时候需要考虑异步处理。 2. 前端处理：调整超时时间，但这可能不现实，因为用户提到的超时时间可能受浏览器或服务器配置限制。 3. 异步处理：后台接到请求后立即返回202 Accepted，并开始异步处理。前端轮询或使用WebSocket获取结果。这样前端不会长时间等待，避免超时。 4. 错误处理：前端在超时后，不直接跳转或显示404，而是提示用户处理中，并定期检查状态。 现在需要结合这些引用中的解决方案。根据引用[2]，Spring Boot可以使用异步响应，比如DeferredResult或CompletableFuture，让后台立即返回，处理完成后再通知前端。前端需要轮询结果，或者使用长轮询、WebSocket。 用户提到超时后返回404，可能的原因是前端在超时后重新请求了一个不存在的资源。例如，假设前端在超时后尝试获取结果，但后台还未完成处理，此时资源不存在，返回404。因此，解决方案应包括： - 后台异步处理，生成资源后存储结果，并提供状态查询接口。 - 前端在初次请求后，收到处理ID，定期查询状态，直到处理完成。 - 前端处理超时时，提示用户等待，而不是直接跳转。 另外，需要确保后台处理完成后，资源可用，避免404。例如，生成临时URL或确保资源路径正确。 可能还需要配置服务器的超时时间，但根据引用[2]，异步处理是更有效的方案，因为它解耦了请求和处理，避免前端长时间等待。 总结步骤： 1. 修改后台接口为异步处理，立即返回202和任务ID。 2. 前端轮询状态接口，直到任务完成。 3. 处理完成后，前端获取结果，避免404。 4. 前端优化错误处理，超时后提示而非跳转。 5. 后台确保资源在完成后可访问，避免404。 需要检查用户的具体实现，比如前端框架（如Vue，引用[3]）和后台框架（如Spring Boot，引用[2]），提供相应的代码示例。 例如，后台使用Spring Boot的DeferredResult： ```java @RestController public class AsyncController { private Map<String, DeferredResult<ResponseEntity<?>>> tasks = new ConcurrentHashMap<>(); @PostMapping("/api/task") public DeferredResult<ResponseEntity<?>> createTask() { String taskId = UUID.randomUUID().toString(); DeferredResult<ResponseEntity<?>> deferredResult = new DeferredResult<>(60000L); tasks.put(taskId, deferredResult); // 异步处理任务 CompletableFuture.runAsync(() -> { // 长时间处理 ResponseEntity<?> result = processTask(); deferredResult.setResult(result); tasks.remove(taskId); }); return deferredResult; } @GetMapping("/api/status/{taskId}") public ResponseEntity<?> checkStatus(@PathVariable String taskId) { if (tasks.containsKey(taskId)) { return ResponseEntity.accepted().body("处理中"); } else { return ResponseEntity.ok().body("处理完成"); } } } ``` 前端部分，使用Vue进行轮询： ```javascript async function submitTask() { try { const response = await axios.post('/api/task'); const taskId = response.data.taskId; const pollInterval = setInterval(async () => { const statusResponse = await axios.get(`/api/status/${taskId}`); if (statusResponse.data === '处理完成') { clearInterval(pollInterval); // 获取最终结果 const result = await axios.get(`/api/result/${taskId}`); // 处理结果 } }, 2000); } catch (error) { if (error.response && error.response.status === 404) { // 处理404错误，提示用户 } } } ``` 此外，前端在超时后应处理错误，而不是直接跳转。比如，使用axios的拦截器处理超时错误，显示提示信息： ```javascript axios.interceptors.response.use( response => response, error => { if (error.code === 'ECONNABORTED') { // 显示友好提示，如“处理中，请稍后查看” } return Promise.reject(error); } ); ``` 最后，确保后台在处理完成后正确存储结果，并提供访问接口，避免404。例如，处理完成后将结果存入数据库或缓存，状态接口返回完成时，前端再请求结果接口。 总结：解决方案需要前后端配合，采用异步处理加轮询机制，前端优化错误处理逻辑，后台确保资源可访问。</think>### 前端请求超时导致404错误的解决方案 #### 问题分析 当后台接口处理时间超过前端设置的超时时间（如60秒），请求会被前端主动取消（状态显示为`canceled`）[^1][^3]。此时可能出现404错误的原因包括： 1. **资源未生成**：后台仍在处理，但前端已超时并尝试访问未准备好的资源 2. **二次请求失效**：用户重复提交请求时，后台未正确处理异步任务状态 3. **错误处理缺失**：前端未正确处理超时后的状态提示 --- ### 解决方案（前后端协作） #### 一、后端改造：异步处理机制 **1. 接口拆分（Spring Boot示例）** ```java // 提交任务接口 @PostMapping("/submit") public ResponseEntity<Task> submitTask() { String taskId = UUID.randomUUID().toString(); Task task = new Task(taskId, "PROCESSING"); taskQueue.add(task); // 异步处理 CompletableFuture.runAsync(() -> { processTask(taskId); // 耗时操作 task.setStatus("COMPLETED"); }); return ResponseEntity.accepted().body(task); // 返回202状态码[^2] } // 状态查询接口 @GetMapping("/status/{taskId}") public ResponseEntity<Task> getStatus(@PathVariable String taskId) { return taskQueue.findById(taskId) .map(task -> ResponseEntity.ok(task)) .orElse(ResponseEntity.notFound().build()); } ``` **2. 关键配置** ```yaml # application.yml spring: task: execution: pool: core-size: 10 max-size: 50 ``` --- #### 二、前端优化：交互设计 **1. 请求处理改造（Vue + axios示例）** ```javascript // 提交请求时获取任务ID async submit() { try { const res = await axios.post('/submit', params, {timeout: 30000}) this.startPolling(res.data.taskId) // 开始轮询 } catch (err) { if (err.code === 'ECONNABORTED') { this.$message.warning('请求已提交，请稍后查看结果') // 超时提示而非跳转 } } } // 轮询状态 startPolling(taskId) { const timer = setInterval(async () => { const res = await axios.get(`/status/${taskId}`) if (res.data.status === 'COMPLETED') { clearInterval(timer) this.loadResult(taskId) // 获取最终结果 } }, 2000) } ``` **2. 错误拦截处理** ```javascript // 全局拦截器 axios.interceptors.response.use( response => response, error => { if (error.response?.status === 404) { return Promise.reject('操作尚未完成，请勿重复提交') } return Promise.reject(error) } ) ``` --- #### 三、架构优化建议 1. **结果缓存**：使用Redis存储处理结果，设置合理过期时间 ```java @CachePut(value = "results", key = "#taskId") public Task processTask(String taskId) { // 处理逻辑 } ``` 2. **进度反馈**：支持返回处理进度百分比而非简单状态 3. **WebSocket推送**：重要任务可采用实时推送机制 ```javascript const ws = new WebSocket(`/ws/${taskId}`) ws.onmessage = (event) => { this.progress = JSON.parse(event.data).percent } ``` --- ### 效果验证 | 阶段 | 旧方案 | 新方案 | |---------------|--------------------------|-------------------------------| | 请求提交 | 直接超时报错 | 立即返回任务ID，提示"处理中" | | 处理中 | 页面卡死 | 显示进度条或状态提示 | | 处理完成 | 需要用户重新操作 | 自动刷新结果区域 | | 错误场景 | 直接显示404 | 明确提示"任务仍在处理中" | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值