reactjs 发送令牌到后端服务器,但无法连接到它与react-google-recaptcha

igetnqfo  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(81)

我尝试发送令牌到我的后端服务器,让它与谷歌验证令牌。但是,我的前端似乎没有连接到我的后端。
我收到的错误消息:POST http://localhost:3000/post 404(未找到)显然,我的FE无法找到要使用的端口。
我曾尝试使用frontend的API请求与谷歌提供的URI,但我遇到了CORS的问题,它是不安全的。
通过console.log(token),我发现库本身没有问题,因为我已经成功地从Google获得了一个成功的响应,使用POSTMAN的token。
下面是我的前端:

const handleVerify = async (token) => {
        console.log(token)
        const captchaToken = token;

        await axios.post("/post", { captchaToken })
            .then(res => console.log(res)
                .catch((error) => {
                    console.log(error)
                }))

        setIsVerified(true)
        setActiveStep(activeStep + 1);
    }

.....
       <ReCAPTCHA
            ref={recaptchaRef}
            sitekey={process.env.REACT_APP_SITE_KEY}
            onChange={(token) => handleVerify(token)}
            size="normal"
            onExpired={(expire) => handleShowExpired(expire)}
            >
       </ReCAPTCHA>
.....

下面是我的后端:

const express = require("express");
const cors = require("cors");
const axios = require("axios");
const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

//POST route
router.post("/post", async (req, res) => {
    const { captchaToken } = req.body;

    //sends secret key and response token to google
    await axios.post(
        `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.SECRET_KEY}&response=${captchaToken}`
    );

    //check response status and send back to client
    if (res.data.success) {
        res.send("Human");
    } else {
        res.send("Robot");
    }
});
sy5wg1nm

sy5wg1nm1#

如果您的服务器在端口5000上运行,您应该await axios.post("http://localhost:5000/post", { captchaToken })
此外,还必须验证axios响应。

router.post("/post", async (req, res) => {
    const { captchaToken } = req.body;

    //sends secret key and response token to google
    const axiosResponse = await axios.post(
        `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.SECRET_KEY}&response=${captchaToken}`
    );

    //check response status and send back to client
    if (axiosResponse.data.success) {
        res.send("Human");
    } else {
        res.send("Robot");
    }
});

相关问题