问一下，我在后端的node.js里面写了发送短信验证码的功能，并且利用apifox测试可以正常发送验证码，但是到了前端后就一直是报错的状态
控制台报错如图
（以下为后端ali.js的短信验证码发送代码）
const express = require('express');
const router = express.Router(); // 创建一个 router 实例
const Core = require('@alicloud/pop-core'); // 引入阿里云 SDK
const client = new Core({ // 创建 Client 对象
accessKeyId: '自己的AccessKey ID', // 替换成自己的 AccessKey ID
accessKeySecret: '自己的 AccessKey Secret', // 替换成自己的 AccessKey Secret
endpoint: 'https://dysmsapi.aliyuncs.com',// API 访问入口，根据实际情况修改
apiVersion: '2017-05-25' // API 版本号，根据实际情况修改
});
let yanzhengma = ''
// 生成随机验证码
function generateCode() {
const code = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
// yanzhengma = code.toString()
return code.toString();
}
//////
// 验证手机号码格式
function isValidPhoneNumber(phoneNumber) {
const phoneRegex = /^1[3-9]\d{9}$/; // 正则表达式匹配中国大陆手机号码
return phoneRegex.test(phoneNumber);
}
//////////
// 发送短信验证码
router.post('/url', (req, res) => {
const phoneNumber = req.body.phone; // 获取手机号码
//////////////
// 验证手机号码格式
if (!isValidPhoneNumber(phoneNumber)) {
return res.status(400).json({
message: '手机号码格式错误'
});
}
////////////
const code = generateCode(); // 生成验证码
yanzhengma = code; // 找回密码的校验，yanzhengma存储的是生成的验证码
const params = {
"RegionId": "cn-beijing",
"PhoneNumbers": phoneNumber,
"SignName": "签名名称",// 短信签名名称，需先在阿里云控制台中申请审核通过
"TemplateCode": "短信模板 CODE",// 短信模板 CODE，需先在阿里云控制台中申请审核通过
"TemplateParam": JSON.stringify({
"code": code
})
};
const requestOption = {
method: 'POST',
timeout: 6000
};
client.request('SendSms', params, requestOption).then((result) => {
console.log(result);
res.status(200).json({
message: '验证码已发送，请注意查收！',
code: code
});
}, (ex) => {
console.log(ex);
res.status(500).json({
message: '短信发送失败，请稍后重试！'
});
});
});
// 验证验证码
router.post('/verify-code', (req, res) => {
const phoneNumber = req.body.phoneNumber; // 获取手机号码
const inputCode = req.body.code; // 获取用户输入的验证码
console.log(inputCode);
console.log(yanzhengma);
if (inputCode === yanzhengma) { // 验证码一致，登录成功
res.status(200).json({
message: '登录成功！'
});
} else { // 验证码不一致，登录失败
res.status(400).json({
message: '验证码错误，请重新输入！'
});
}
});
// 导出 router 以便在主应用中使用
module.exports = router;
（以下为前端代码）
<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.verificationCode" 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: '',
verificationCode: '', // 验证码
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('/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('/verify-code', {
phoneNumber: form.value.phone,
code: form.value.verificationCode
});
if (response.data.message === '登录成功！') {
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>
