前端无法验证验证码是否正确

Question

问一下，我在后端的node.js里面写了发送短信验证码和验证的功能，并且利用apifox测试可以正常发送验证码并验证，但是到了前端后就一直是可以发送验证码，但是一直提示验证码错误

（以下为后端ali.js代码）

const express = require('express');
const { Yzm } = require('../models'); // 确保 Yzm 模型已正确导入
const router = express.Router();
const Core = require('@alicloud/pop-core');

const client = new Core({
  accessKeyId: 'L12345',
  accessKeySecret: 'ddddd',
  endpoint: 'https://dysmsapi.aliyuncs.com',
  apiVersion: '2017-05-25'
});

// 生成随机验证码
function generateCode() {
  const code = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
  return code.toString();
}

// 验证手机号码格式
function isValidPhoneNumber(phoneNumber) {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phoneNumber);
}

// 发送短信验证码
router.post('/url', async (req, res) => {
  const phoneNumber = req.body.phone;
  if (!isValidPhoneNumber(phoneNumber)) {
    return res.status(400).json({
      message: '手机号码格式错误'
    });
  }
  const code = generateCode();
  try {
    // 保存验证码和手机号码到数据库
    await Yzm.create({ phone: phoneNumber, yzm: code });
    const params = {
      "RegionId": "cn-beijing",
      "PhoneNumbers": phoneNumber,
      "SignName": "456",
      "TemplateCode": "789",
      "TemplateParam": JSON.stringify({ "code": code })
    };
    const requestOption = {
      method: 'POST',
      timeout: 6000
    };
    await client.request('SendSms', params, requestOption);
    res.status(200).json({
      message: '验证码已发送，请注意查收！'
    });
  } catch (ex) {
    console.log(ex);
    res.status(500).json({
      message: '短信发送失败，请稍后重试！'
    });
  }
});

// 验证验证码
router.post('/yanzm-code', async (req, res) => {
  const { phone, code: inputCode } = req.body;

  try {
    if (!phone || !inputCode) {
      return res.status(400).json({ message: '请求体中缺少必要的参数' });
    }

    const verification = await Yzm.findOne({ where: { phone: phone } });
    if (verification && verification.yzm === inputCode) {
      res.status(200).json({ message: '验证成功！' });
    } else {
      res.status(400).json({ message: '验证码错误，请重新输入！' });
    }
  } catch (ex) {
    console.log(ex);
    res.status(500).json({ message: '服务器错误，请稍后再试。' });
  }
});

module.exports = router;

（以下为前端vue代码）

<template>
  <div class="sign-in">
    <el-row>
      <el-col :span="12" :offset="6">
        <h1>经书用户后台 - 用户注册</h1>
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入11位手机号码" />
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="form.code " placeholder="请输入验证码" />
            <el-button type="primary" @click="sendVerificationCode">获取验证码</el-button>
          </el-form-item>

          <el-form-item label="昵称" prop="username">
            <el-input v-model="form.username" placeholder="请输入昵称（可不填写）"/>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入6-45位密码，请务必牢记" />
          </el-form-item>
          <el-form-item label="再次输入密码" prop="passwordConfirmation">
            <el-input v-model="form.passwordConfirmation" type="password" placeholder="请再次输出密码"/>
          </el-form-item>

          <el-divider />

          <el-form-item>
            <el-button
                type="primary"
                @click="submitForm(formRef)"
            >
              提交
            </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12" :offset="6">
        <router-link to="/login">已有账号，立即登录</router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { register } from '@/api/auth.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'; // 引入axios用于发送HTTP请求
const router = useRouter();

const formRef = ref(null);
const form = ref({
  username: '',
  phone: '',
  code: '', // 验证码
  sex: 2,
  password: '',
  role: 0,
  passwordConfirmation: '',
});

const rules = ref({
  phone: [
    { required: true, message: '请填写手机号', trigger: 'blur' },
    { type: 'phone', message: '号码格式不正确', trigger: 'blur' }
  ],
  username: [
    { required: false, message: '请填写用户名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2~10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' },
    { min: 6, max: 45, message: '长度在6~45个字符', trigger: 'blur' }
  ],
  passwordConfirmation: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePasswordConfirmation, trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
});

//发送验证码
const sendVerificationCode = async () => {
  const phoneNumber = form.value.phone;
  if (!phoneNumber) {
    ElMessage.error('请先填写手机号码');
    return;
  }
  try {
    const response = await axios.post('http://localhost:3000/ali/url', { phone: phoneNumber });
    if (response.data.message) {
      ElMessage.success(response.data.message);
    }
  } catch (error) {
    console.error('发送验证码失败:', error);
    ElMessage.error('发送验证码失败，请稍后再试');
  }
};

// 二次密码验证
function validatePasswordConfirmation(rule, value, callback) {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== form.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}

// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        // 发送请求，确保字段名称与后端一致
        const response = await axios.post('http://localhost:3000/ali/yanzm-code', {
          phone: form.value.phone,
          code: form.value.code
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        // 处理响应
        if (response.data.success) {
          const res = await register(form.value);
          ElMessage.success(res.message);
          await router.push({ path: "/login" });
        } else {
          ElMessage.error('验证码错误，请重新输入');
        }
      } catch (error) {
        console.error('验证验证码失败:', error);
        ElMessage.error('验证验证码失败，请稍后再试');
      }
    }
  });
};




// 重置
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.sign-in {
  margin-top: 50px;
  text-align: center;
}
</style>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题看起来像是在前端和后端之间的数据交互出现了问题。尽管你的后端代码看起来可以正确地发送验证码并验证它们，但在前端可能存在问题。这可能是由于多种原因造成的，如网络问题、前端代码中的错误或者是前后端数据格式的不匹配等。下面是一些可能的解决步骤：

1. 检查网络请求：确保前端发送的验证码请求和后端接收的验证码请求格式一致。你可以使用浏览器的开发者工具来查看网络请求和响应，确认前端是否正确地发送了验证码信息。
2. 检查前端代码：在你的前端Vue代码中，你在提交表单时发送了验证码，但是你没有处理可能的错误响应。你应该在axios请求中添加一个错误处理函数，以获取更详细的错误信息。例如：

axios.post('http://localhost:3000/ali/yanzm-code', {
  phone: form.value.phone,
  code: form.value.code
}).catch((error) => {
  console.error('验证失败:', error);
});

这样你就可以看到更详细的错误信息，这可能会帮助你找到问题所在。

1. 检查后端代码：确认后端是否正确接收并处理了验证码请求。你可以在后端代码中添加日志输出，以查看请求和响应的具体内容。
2. 检查验证码的验证逻辑：确认你的验证码验证逻辑是否正确。你正在从数据库中获取验证码，然后与输入的验证码进行比较。确认你正确地获取了验证码并进行了比较。另外，你的验证码有效期设置是否合适？如果验证码过期，用户也会收到“验证码错误”的提示。
3. 验证数据的正确性：确认前端发送的数据（手机号和验证码）是否都是有效的。如果数据无效或格式不正确，那么验证过程可能会失败。

如果以上步骤都无法解决问题，你可能需要更深入地调试你的代码，或者考虑使用更详细的日志和错误消息来找到问题所在。同时，你也需要确保你的API和路由都是正确的，以及服务器运行正常并且可以接收请求。