(标签-前端|关键词-404错误)

Question

前端请求后端，报404错误

//获取用户数据
document.addEventListener("DOMContentLoaded", function () {
    var context=document.getElementById("spanId").textContent;
    var colonIndex=context.indexOf(":");
    username=context.substring(colonIndex+1).trim();
    // 发送Ajax请求获取用户数据
    fetch("/User/info?username=" + username)
    .then(response => {
        console.log(response.status);
        console.log(response.json()) ;
            if (!response.ok) {
                throw new Error('服务器返回错误.');
            }
        // 检查响应的内容类型是否为 JSON
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
            return response.json();
        } else {
            throw new Error('服务器返回的不是有效的 JSON 数据');
        }
    }).then(data => {
            // 将获取的数据填充到页面中
            console.log("服务器响应数据",data);
            function fillUserData(data) {
                // 填充用户数据到页面中
                document.querySelector(".input-field[name='name']").value = data.name;
                document.querySelector(".input-field[name='age']").value = data.age;
                document.querySelector(".input-field[name='gender']").value = data.gender;
                document.querySelector(".input-field[name='birthdate']").value = data.birthdate;
                document.querySelector(".input-field[name='address']").value = data.address;
                document.querySelector(".input-field[name='hobbies']").value = data.hobbies;
                document.querySelector(".input-field[name='education']").value = data.education;
                document.querySelector(".input-field[name='occupation']").value = data.occupation;
                document.querySelector(".input-field[name='phone']").value = data.phone;
                document.querySelector(".input-field[name='email']").value = data.email;
            }
            fillUserData(data);
        }).catch(error => {
            // 处理异常情况
            console.error('异常:', error);
        });

Springmvc代码

package com.controller;
import com.dao.Users;
import com.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/User")
public class UsersController{
    @Autowired
    private UsersService userService;
    @GetMapping("/info")
    public Users getUserByUsername(@RequestParam String username) {
        return userService.getUserByUsername(username);
    }
}

错误

Answer 1

Suit mob438 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

错误是前端请求后端时报404错误。这种错误通常是由于请求的URL不正确导致的。

解决方案如下：

1. 检查请求的URL是否正确。在前端代码中，fetch方法中的URL应该与后端的请求URL对应。请确保URL路径和参数正确。

2. 确保后端控制器的URL映射正确。在后端代码中，@RequestMapping注解中的路径应该与前端请求的URL对应。请确保路径与前端代码中的fetch方法中的URL一致。

3. 检查后端控制器方法的请求方法是否匹配。在后端代码中，@GetMapping注解中的路径应该与前端请求的URL对应，并且请求方法应该相同（GET或POST）。请确保请求方法与前端代码中的fetch方法中的请求方法一致。

4. 确保后端服务正常运行。检查后端服务是否已启动，并且监听的端口号与前端代码中的fetch方法中的URL对应。

5. 查看后端服务的日志。在后端服务控制台或日志文件中查找是否有任何错误或异常信息。这可能会提供有关错误的更多详细信息。

6. 检查网络连接。确保前端能够成功访问后端服务，检查网络连接是否正常，确保没有任何防火墙或代理服务器阻止了请求。

以上是排查和解决404错误的一般步骤，请针对具体情况逐一排查。如果问题仍然存在，请提供相关的错误信息和代码，以便更好地帮助您解决问题。