标题：Spring Boot API 端点返回 404 未找到注册请求（无数据库）

Question

我正在开发一个部署在 Azure 上的 Web 应用程序。从前端访问时，我的 API 的注册端点返回 404 Not Found 错误。后端被设置为处理注册请求，并且前端被正确配置为发送注册数据。 这是java控制器 当部署在本地主机上时，它还会返回 404。 （我检查了端点是否正确是的） 我的最终目标是让我的登录有效（部署在天蓝色上），而不仅仅是本地主机（如果我什至可以让它工作）

@RestController
@RequestMapping("/api/users")
public class UserController {

    private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping("/register")
    public ResponseEntity<?> registerUser(@RequestBody User newUser) {
        User registeredUser = userService.registerUser(newUser.getPhoneNumber(), newUser.getUsername(), newUser.getPassword());
        if (registeredUser != null) {
            return ResponseEntity.ok("Registration successful");
        } else {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Registration failed");
        }
    }

    @PostMapping("/login")
    public ResponseEntity<?> loginUser(@RequestBody User loginUser, HttpSession session) {
        User user = userService.loginUser(loginUser.getUsername(), loginUser.getPassword());
        if (user != null) {
            session.setAttribute("userId", user.getUserId());
            Map<String, String> response = new HashMap<>();
            response.put("message", "Login successful");
            return ResponseEntity.ok(response);
        } else {
            Map<String, String> response = new HashMap<>();
            response.put("message", "Invalid credentials");
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(response);
        }
    }

    @PostMapping("/logout")
    public ResponseEntity<?> logoutUser(HttpSession session) {
        session.invalidate();
        Map<String, String> response = new HashMap<>();
        response.put("message", "Logged out successfully");
        return ResponseEntity.ok(response);
    }

    @GetMapping("/test")
    public ResponseEntity<String> testEndpoint() {
        return ResponseEntity.ok("Test endpoint is working!");
    }
}

public class UserService {
    private UserData userData = new UserData();

    public User registerUser(String phoneNumber, String username, String password) {
        return userData.registerUser(phoneNumber, username, password);
    }

    public User getUserById(String userId) {
        return userData.getUserById(userId);
    }

    public User loginUser(String username, String password) {
        return userData.loginUser(username, password);
    }
}

package Backend;

import java.util.ArrayList;
import java.util.List;

public class User {
    private String userId;
    private String phoneNumber;
    private String username;
    private String password;
    private List<User> friends;

    public User(String userId, String phoneNumber, String username, String password, List<User> friends) {
        this.userId = userId;
        this.phoneNumber = phoneNumber;
        this.username = username;
        this.password = password;
        this.friends = friends;
    }

    // Getters and setters
}

document.getElementById('registerForm').addEventListener('submit', function(event) {
    event.preventDefault();
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    let phoneNumber = document.getElementById('phonenumber').value;

    var userData = {
        username: username,
        password: password,
        phoneNumber: phoneNumber
    };

    fetch('http://localhost:8080/api/users/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    })
    .then(response => {
        if (response.ok) {
            alert('Registration successful!');
            document.getElementById('registerForm').reset();
            window.location.href = 'login.html';
        } else {
            throw new Error('Registration failed.');
        }
    })
    .catch(error => {
        console.error('Registration error:', error);
        alert('Registration failed. Please try again later.');
    });
});

问题： 当我尝试提交注册表时，收到 404 Not Found 错误。我已验证我的 API 已正确部署在 Azure 上并且应该可以访问

我有： 确保 Azure 应用服务正在运行。 已验证端点 /api/users/register 在 UserController.java 中是否正确定义。 检查 WebConfig.java 中的 CORS 配置以允许来自所有来源的请求。 确认 JavaScript 文件 (Register.js) 已正确链接并向正确的 Azure URL 发出 POST 请求。

编辑： 本地一切正常，我的前端是用纯 html/css/js 制作的 链接 ID 和名称也已正确链接

编辑： 我的html css和js都在静态文件中， src/main/resources/static/ccs src/main/resources/static/js src/main/resources/static/（我所有的html代码）

Answer 1

我尝试了下面的代码并部署到azure应用程序服务，没有任何问题。

确保前端的获取 Uri 与 Azure Web 应用程序 URI 端点匹配

https://<Azurewebappurl>/api/users/register

并且 Cors 在 webConfig.java 中配置为允许来自所有来源的请求。

以下是完整的注册代码。

注册.js：

document.getElementById('registerForm').addEventListener('submit', function(event) {
    event.preventDefault();
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    let phoneNumber = document.getElementById('phonenumber').value;
    var userData = {
        username: username,
        password: password,
        phoneNumber: phoneNumber
    };
    fetch('/api/users/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    })
    .then(response => {
        if (response.ok) {
            alert('Registration successful!');
            document.getElementById('registerForm').reset();
            window.location.href = 'login.html';
        } else {
            throw new Error('Registration failed.');
        }
    })
    .catch(error => {
        console.error('Registration error:', error);
        alert('Registration failed. Please try again later.');
    });
});

注册.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <form id="registerForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>

        <label for="phonenumber">Phone Number:</label>
        <input type="text" id="phonenumber" name="phonenumber" required><br>

        <button type="submit">Register</button>
    </form>
    <script src="/js/register.js"></script>
</body>
</html>

webConfig.java:

package com.example.myapp.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("*") 
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*");
            }
        };
    }
}

Azure Web 应用程序输出：