React.js - signed endpoint HMAC SHA256


I wanna fetch data, and also make a trade using React.js

I’m using “crypto-js” (for HMAC SHA256 signature) and “” to send queryString.

I came up with some code for placing an order, but it seems that something is not configured quite right.

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import CryptoJS from 'crypto-js'
import './App.css';

const burl = ''
const endPoint = '/api/v3/order'
let dataQueryString = 'symbol=BTCUSDT&side=BUY&type=LIMIT&timeInForce=GTC&quantity=0.001&price=5000&recvWindow=60000&timestamp=' +

// apiKey and secretKey : from Binance API doc

const keys = {
	'akey' : '',
	'skey' : ''

let signature = CryptoJS.HmacSHA256(dataQueryString, keys['skey']).toString(CryptoJS.enc.Hex)

let url = burl + endPoint + '?' + dataQueryString + '&signature=' + signature

function App() {

	const [error, setError] = useState([])
	const [res, setRes] = useState([])

	const componentDidMount = async () => {
		const buyOrder = await, {
			headers: {
				'X-MBX-APIKEY': keys['akey']
		.then((res) => {
		console.log("res: " + JSON.stringify(res))
		.catch((error) => {
		console.log("error: " + JSON.stringify(error))

	useEffect(function() {
	}, [])

	return (
		<div className="App">

export default App;

Can anyone help me?

Please don’t share any secret key here.

Here is a simple about hashing the signature in Nodejs.

API keys are from Binance documentation, so I thought it’s OK to use them as an example

Await and Then? did not know that they can be combined

that’s query string, pretty standard.

As I understand “await” appeared to replace “then”, or use “await” or use “then” but not both, example

> await myfunction ()


> myfunction (). then ()

So far I have not seen code that combines both

> await myfunction (). then ()

You could use:

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
  } catch (error) {

But I decided in another way

Dino, thank you for answering. It seems that my problem is in CORS because I got an error:

Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

thanks for your updates, it seems the issue of CORS. Hope you will find a way to send the request in your server side.

@Crypto could you please also add the code of decryption of HMAC or validation of HMAC at API side .

You cannot send authenticated request from frontend. It’d be blocked by CORs policy. Use a backend server to forward the request pls.

“Crypto” NPM package is deprecated in favor of “crypto-js”.