m0_74217538 2024-07-19 18:02 采纳率: 0%
浏览 30

IDEA 运用easy-captcha创建验证码浏览器端404报错

idea前端代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="header">
    <div class="cover">
        <span class="text0">欢迎访问大学生家教服务系统</span>
    </div>
</div>
<div id="nav">
    <div class="leftbox">

    </div>
    <div class="login">
        <div class="form">
            <a href="open.jsp">返回初始页面</a>
            <form id="loginForm" action="LoginController" method="post">
                用&emsp;&emsp;户：<input id="username" type="text" name="username"><br>
                密&emsp;&emsp;码：<input id="password" type="password" name="password"><br>
                身&emsp;&emsp;份：<select id="identity" name="identity">
                <option value="学生">学生</option>
                <option value="教师">教师</option>
                <option value="管理员">管理员</option>
                </select><br>
                <div id="app" class="verification-input">
                    验&ensp;证&ensp;码：<input type="text" id="captcha" name="captcha" v-model="user.verCode"  size="6" required><br>
                    <img :src="captchaUrl" @click="clickImg" width="135px" height="33px"  /><br>
                </div>
                <button type="submit" onclick="validateForm()">登录</button>
            </form>
        </div>
    </div>
    <div class="rightbox">

    </div>
</div>
<div id="banner">

</div>
<div id="footer">

</div>

<audio controls autoplay>
    <source src="http://music.163.com/song/media/outer/url?id=2095353936.mp3"  autoplay="autoplay" loop>0>
    Your browser does not support the audio element.
</audio>
<%--<script src="../js/vue.2.6.11/vue.min.js"></script>--%>
<%--<script src=""--%>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            captchaUrl:'/captcha',
            user: {
                verCode: ''
            }
        },
        methods: {
            clickImg() {
                this.captchaUrl = '/captcha?' + Math.random();; // 更新 URL 以防止缓存
            }
        },
        mounted() {
            this.clickImg(); // 组件挂载时初始化验证码图片
        }
    });
    function validateForm() {
        var password = document.getElementById('password').value;
        if (!password.match(/^(?=.*\d)(?=.*[a-zA-Z])(.{4,})$/)) {
            alert('密码因包含数字和字母且至少有4位');
            return false;
        }
    }
</script>
</body>
</html>

idea后端代码

package Login;
import org.springframework.stereotype.Controller;
import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.base.Captcha;
import com.wf.captcha.utils.CaptchaUtil;
import org.springframework.web.bind.annotation.*;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.xml.transform.Result;
import java.io.IOException;
@RestController

public class CaptchaController {
    @RequestMapping("/captcha")
    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");
        SpecCaptcha captcha=new SpecCaptcha(135,33,4);
        captcha.setCharType(Captcha.TYPE_ONLY_NUMBER);
        CaptchaUtil.out(captcha,request,response);
    }
    @PostMapping ("/login")
    public Result login(@RequestBody Login user, HttpServletRequest request){
        if(!CaptchaUtil.ver(user.getVercode(), request)){
            CaptchaUtil.clear(request);

        }
        return null;
    }
}

idea里面的 pom.xml


```xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com</groupId>
    <artifactId>teamWork</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>teamWork</name>
    <packaging>war</packaging>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <junit.version>5.9.2</junit.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.10</version>
        </dependency>
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.2</version>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpeg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
</project>



不管怎么运行,服务器端关于验证码部分始终报错
Failed to load resource: the server responded with a status of 404 ()
  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-07-19 18:02
    关注

    引自免费微信小程序：皆我百晓生

    这个问题涉及到前端和后端的交互，特别是在使用验证码的时候。基于你提供的代码和描述，这里有几个可能的问题和解决方法：

    1. 后端验证码URL错误：确保你的验证码URL是正确的。在你的前端代码中，你设置了验证码的URL为/captcha，这个URL应该和你的后端代码中定义的URL一致。如果后端URL有所不同，请相应地修改前端代码中的URL。
    2. 后端处理验证码的代码问题：确保后端处理验证码的代码没有问题。在你的代码中，CaptchaUtil.ver()方法用于验证用户输入的验证码是否正确，CaptchaUtil.clear()方法用于清除session中的验证码。确保这些方法的实现没有问题。同时，确保你的登录方法（login）正确处理了验证码验证失败的情况。
    3. 前端请求验证码的方式问题：在前端代码中，你使用了Vue框架来动态更新验证码图片。当点击验证码图片时，会调用clickImg()方法并更新captchaUrl。请确保点击图片后正确触发了这个更新URL的逻辑，并确认新生成的URL是有效的。
    4. 服务器配置问题：确认你的服务器配置（如Tomcat或其他服务器）正确配置了静态资源的路径和访问权限。有时候服务器配置问题可能导致静态资源（如图片）无法正确加载。
    5. 静态资源路径问题：在pom.xml文件中配置的静态资源路径是否正确也是一个可能的问题点。你需要确保服务器的配置与pom.xml中的配置一致，特别是关于静态资源的路径映射部分。此外，请检查你的服务器是否正确设置了静态资源的处理规则。对于Tomcat服务器，你可以在Tomcat的配置文件（如server.xml）中添加或修改相关配置以确保静态资源能够正确加载。同时检查是否有任何防火墙或安全设置阻止了静态资源的加载。检查服务器日志以获取更多关于错误的详细信息。检查是否有任何相关的错误消息或警告，这可能会提供关于问题的线索。查看服务器日志中有关HTTP请求的错误记录以及相关的堆栈跟踪信息将有助于诊断问题所在。确认你的服务器是否正确地处理了来自前端的请求并返回了正确的响应。如果服务器返回了错误的状态码（如404），这可能意味着请求的路径不正确或者服务器无法找到相应的资源。在这种情况下，你需要检查请求的URL是否正确以及服务器上是否存在相应的资源文件。如果可能的话，尝试直接在浏览器中访问后端提供的验证码URL（例如/captcha），看看是否能够正常获取到验证码图片。如果无法获取图片，那么问题可能在于后端处理验证码的代码或者服务器的配置问题。另外，请确保你的服务器已经正确配置了关于静态资源的处理规则（如Servlet配置）。如果你使用的是Spring Boot框架，你可能需要配置Spring Boot来处理静态资源的请求并确保它们被正确地映射到正确的路径上。如果以上步骤都没有解决问题，你可能需要进一步检查你的代码和服务器配置以找到问题的根源。希望这些建议能帮助你解决问题！如果你还有其他问题或需要进一步的帮助，请随时提问。
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 7月19日