后端新手遇reCAPTCHA验证404及连接拒绝问题求助

初始404错误原因 #

前端npm开发服务器跑在8080端口，但后端服务没部署在这个端口，也没配置代理或正确指向后端地址，导致请求发到前端服务器的/Login路径，找不到对应接口，返回404。

连接拒绝错误原因 #

改axios baseURL到8090后出现连接拒绝，核心原因是后端服务没在8090端口启动，而且你的后端代码本身存在多处问题，导致服务无法正常运行。

代码问题及修复 #

前端Login.vue问题修复 #

1. axios未导入：你设置了axios.defaults.baseURL但没在script里导入axios，会导致axios未定义，需添加导入语句
2. 表单数据获取错误：请求里用self.UserName、self.Password，但这些属性属于loginForm对象，要改成self.loginForm.UserName和self.loginForm.Password
3. 表单提交逻辑错误：表单submit事件绑定的是onCaptchaExpired，点击登录按钮会直接触发验证码过期逻辑，而非提交表单，需修改绑定事件

修复后的关键代码片段：

<script>
import { VueRecaptcha } from 'vue-recaptcha';
import axios from 'axios'; // 新增axios导入
axios.defaults.baseURL = "http://localhost:8090/"

export default {
  // ... 其他代码不变
  methods: {
    onCaptchaVerified: function (recaptchaToken) {
      // ... 其他代码
      axios.post("/Login", {
        UserName: self.loginForm.UserName, // 修正数据获取路径
        Password: self.loginForm.Password,
        recaptchaToken: recaptchaToken
      })
      // ... 其他代码
    },
    // 新增登录提交方法
    onLoginSubmit: function() {
      if (!this.loginForm.recaptchaVerified) {
        this.showErrorMessage = true;
        return;
      }
      this.$refs.recaptcha.execute(); // 触发验证码验证
    }
  }
}
</script>

同时修改template中的表单绑定：

<form v-on:submit.prevent="onLoginSubmit">

后端api-index.js问题修复 #

1. 重复定义router：开头导入的router和后续const router = require("express")();冲突，需删除无用的导入语句
2. 未导出router且未启动服务：没有创建express实例、挂载路由也没监听端口，导致服务无法启动
3. request模块已废弃：request模块已停止维护，替换为axios更可靠

修复后的完整后端代码：

"use strict";
const express = require("express");
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const axios = require("axios");
const cors = require("cors");

router.use(cors());
router.use(bodyParser.json());

router.post("/Login", async function (req, res) {
    if (!req.body.recaptchaToken) {
        return res.status(400).json({message: "recaptchaToken is required"});
    }
    if (!req.body.UserName || !req.body.Password) {
        return res.status(400).json({message: "UserName and password are required"});
    }

    try {
        const response = await axios.post("https://www.google.com/recaptcha/api/siteverify", null, {
            params: {
                secret: process.env.CAPTCHA_SECRET,
                response: req.body.recaptchaToken
            }
        });

        const body = response.data;
        if (!body.success) {
            return res.status(500).json({message: body["error-codes"].join(".")});
        }

        // 此处添加用户入库逻辑
        res.status(201).json({message: "Congratulations! We think you are human."});
    } catch (err) {
        return res.status(500).json({message: "oops, something went wrong on our side"});
    }
});

app.use(router);

// 监听8090端口
const PORT = 8090;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

module.exports = router;

运行步骤 #

1. 后端安装依赖：npm install express body-parser cors axios
2. 设置环境变量CAPTCHA_SECRET为你的reCAPTCHA密钥
3. 启动后端：node api-index.js，确认控制台输出Server running on port 8090
4. 启动前端服务，此时请求会正确发送到后端接口

内容的提问来源于stack exchange，提问作者ka hei tong