JERRY_LIU 2025-05-26 17:02 采纳率: 83.3%
浏览 14

axios报错, 网页登录demo

想学着写一个登录的网页，在网上搜了一下，给我一个写好的模板，运行一直报错。


<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <form id="loginForm">
        <div>
            <label>用户名:</label>
            <input type="text" id="username" required>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" id="password" required>
        </div>
        <button type="submit">登录</button>
    </form>

    <script setup>
        
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            // const axios = require('axios');
            
            try {
                const response = await axios.post('/api/login', {
                    username,
                    password
                });
                
                if(response.data.success) {
                    localStorage.setItem('token', response.data.token);
                    window.location.href = '/dashboard';
                } else {
                    alert('登录失败: ' + response.data.message);
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录请求失败');
            }
        });
    </script>
</body>
</html>



```javascript

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

const app = express();
app.use(bodyParser.json());

// 模拟用户数据库
const users = [
    { id: 1, username: 'admin', password: '123456' }
];

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    
    // 查找用户
    const user = users.find(u => 
        u.username === username && 
        u.password === password
    );
    
    if (user) {
        // 生成JWT令牌
        const token = jwt.sign(
            { userId: user.id },
            'your-secret-key',
            { expiresIn: '1h' }
        );
        
        res.json({
            success: true,
            token,
            message: '登录成功'
        });
    } else {
        res.status(401).json({
            success: false,
            message: '用户名或密码错误'
        });
    }
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});



我在command窗口中npm i express , npm i body-parser, npm i jsonwebtoken
还有npm i axios --save-dev， 然后运行js档案 npm start , 显示服务器运行起来了
但是在网页中打开html后，输入 ID& PW点登录，却提示

"AxiosError: Request failed with status code 404\n    at Ye (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:31710)\n    at XMLHttpRequest.y (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:36585)\n    at e.<anonymous> (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:48581)\n    at p (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:3448)\n    at Generator.<anonymous> (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:4779)\n    at Generator.throw (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:3858)\n    at p (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:9996)\n    at s (https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js:2:10235)"
是这个引用的URL没有我要的post 方法吗？
原本网上提供的代码引用的URL是CDN.jsdeliver.net，但是一直打不开，我就改成fastly.jsdeliver.net网址引用。
  • 写回答

6条回答 默认 最新

  • 阿里嘎多学长 2025-05-26 17:02
    关注

    阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

    axios报错, 网页登录demo

    你好！你遇到的问题是使用axios报错，导致网页登录demo不能正常运行。下面是可能的解决方案：

    1. 检查axios版本是否正确：请检查你使用的axios版本是否正确。如果你使用的是较新的axios版本，可能需要使用 axios.create() 方法创建axios实例。
    2. 检查网络请求是否正确：请检查你的网络请求是否正确，是否正确地传递了参数和 headers。
    3. 检查错误信息：请检查错误信息，了解错误的原因和位置。

    以下是一个简单的登录demo，使用axios发送POST请求：

    <!DOCTYPE html>
<html>
<head>
    <title>登录demo</title>
</head>
<body>
    <form id="loginForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button id="loginBtn">登录</button>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    <script>
        const loginForm = document.getElementById('loginForm');
        const loginBtn = document.getElementById('loginBtn');
        loginBtn.addEventListener('click', async () => {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            try {
                const response = await axios.post('/login', {
                    username,
                    password
                });
                console.log(response.data);
            } catch (error) {
                console.error(error);
            }
        });
    </script>
</body>
</html>

    这个demo使用axios发送POST请求到 /login 路径，传递用户名和密码参数。请注意，这只是一个简单的示例代码，你需要根据你的实际情况进行修改。

    如果你仍然遇到问题，请提供更多的错误信息和代码，我将尽力帮助你解决问题。

    评论

报告相同问题？

问题事件

  • 创建了问题 5月26日