Как отправить с сервера Node.js изображение в сочетании со случайным числом клиенту

Итак, я новичок в веб-разработке, я просто пытаюсь понять основы. Любые идеи о том, где я могу найти подсказки для решения этой проблемы, очень помогут.

Когда мой клиент вводит URL-адрес http://localhost:5000/creatAccountPage, сервер отправляет ему базовую HTML-страницу. Затем непосредственно html-страница вызывает метод javascript getCaptachaImage() :

async function getCapatchaImage()
{
        const transmittingData =
        {
          clientIdi: "152412",
        };
        const options = 
         {
            method:'POST', 
            headers: {'Content-Type':'application/json'},
            body:JSON.stringify(transmittingData)
         };
        
        const response = await fetch('/getCaptchaImage',options);
        const jsonResponse = await response.json();
        document.getElementById("memory").innerHTML = jsonresponse.randomKey+"";
        document.getElementById("captcha_pic").src = jsonresponse.image; //image is not the right type for this to work. I think i need  to transform my json data to the right format.
}

предполагается, что метод getCapatchaImage() получает изображение и переменную randomKey с сервера. Ниже приведен код моего сервера для почтового запроса /getCaptachaImage. Я использую Node.js, Express и Node-Fetch.

//these are not all the requires but I'm just putting the essentials for this issue.
const fetch = require('node-fetch');
const express = require('express');
const app = express(); 

app.post("/getCaptchaImage",function(req, res)
{
var randomNumber = Math.random()* 100000;
var fullKey = randomNumber +process.env.CAPTCHA_SECRET+"";
const verifyUrl = `http://image.captchas.net?client=demo&random=`+fullKey; //I'm getting my image from an external server I can't get it directly from the client code else the client would know the fullkey which he is not suppose to know.
fetch(verifyUrl)
.then((body) => {
  return res.json({image: body.body, randomKey: randomNumber}); //I suppose I should probably be transforming my image in to a specific format here too. 
});
});

Моя общая идея заключалась в том, чтобы передать мое изображение вместе с моим случайным ключом, чтобы просто поместить данные изображения в строковую переменную image объекта json вместе с переменной randomkey, а затем найти a, чтобы преобразовать строковые данные изображения в нужный мне формат: document.getElementById(captcha_pic).src = ????

Любая идея о том, как преобразовать данные моего изображения, чтобы это работало?

Поскольку в javascript нет четких типов переменных, мне трудно понять, даже какой формат моих данных имеет тело в функции выборки моего серверного кода. Все объяснения в Node-fetch API либо я не понимаю, либо они не говорят мне то, что мне нужно знать. https://www.npmjs.com/package//node-fetch#buffer< /а>

Заранее благодарю за любую помощь.


person Cavern head    schedule 19.04.2021    source источник
comment
Каково значение случайного ключа?   -  person Apoorva Chikara    schedule 19.04.2021
comment
Этот stackoverflow.com/a/16449483/941240   -  person Wiktor Zychla    schedule 19.04.2021
comment
когда клиент заканчивает заполнение своей формы, клиент отправляет обратно случайный ключ на сервер, чтобы сервер мог еще раз пересчитать полный ключ и проверить, был ли ответ клиента на то, что написано на изображении, был правильным, но я действительно знаю капчу система, которую я делаю, имеет недостатки, я просто хочу справиться с ситуацией преобразования данных, как правило. кажется супер простой вещью, чтобы просто отправить данные микширования с изображениями и другими переменными.   -  person Cavern head    schedule 19.04.2021
comment
Виктор Зыхла, я думаю, это ответ на последнюю часть моей проблемы, которая уже очень помогает, так что спасибо. Я думаю, мне все еще нужно выяснить, какую часть jsonresponse.image я должен преобразовать в base64 и как   -  person Cavern head    schedule 19.04.2021
comment
@WiktorZychla Должен сказать, что я действительно не уверен, что и как преобразовать в base64 вдобавок ко всему, когда я пытаюсь установить setAttributes (src, base64convertedData), я получаю на клиенте ошибку: ** GET localhost:5000/'data:image/png;base64 404 (Not Found) ** так что мне кажется сервер должен обслуживать изображение другим методом.   -  person Cavern head    schedule 19.04.2021