how to call API from axios with header-CodePudding

I want to call the API POST method with axios, I did it with postman with header configuration like, and it return the results

and the body request looks :

it return error when I call by axios this my script, anyone can help me what I suppose todo from the axios side ?

const header = {
            headers: {
                'Content-Transfer-Encoding': 'application/json',
                'content-type': 'application/json',
                'HTTP_API_KEY': 'xxxxx',
            }
        }
        axios({
            method: 'POST',
            url: URL,
            headers: header,
            data : {

            }
          })
            .then((response) => {
              if (response.status !== 200) {
                return res.send(respone("500", response.data.result.data))
              } else {
                return res.send(respone("200", response.data.result.data))
              }
            })
            .catch((error) => {
              console.log(error);
              return res.send(error)
            })

the error show

{
"message": "Request failed with status code 404",
"name": "AxiosError",
"config": {
    "transitional": {
        "silentJSONParsing": true,
        "forcedJSONParsing": true,
        "clarifyTimeoutError": false
    },
    "transformRequest": [
        null
    ],
    "transformResponse": [
        null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
        "Accept": "application/json, text/plain, */*",
        "Content-Type": "application/json",
        "Content-Transfer-Encoding": "application/json",
        "HTTP_API_KEY": "xxxx",
        "User-Agent": "axios/0.27.2",
        "Content-Length": 2
    },
    "method": "post",
    "url": "xxxxx",
    "data": "{}"
},
"code": "ERR_BAD_REQUEST",
"status": 404
}

CodePudding user response：

It seems you nested your headers inside another "headers" property. Basically you're doing this

headers: {
    headers: {
        'Content-Transfer-Encoding': ...
    }
}

CodePudding user response：

As Zai showed in her answer you problem is your header variable:

const header = {
        headers: {
            'Content-Transfer-Encoding': 'application/json',
            'content-type': 'application/json',
            'HTTP_API_KEY': 'xxxxx',
        }
    }

is nested, when you do this:

axios({
        method: 'POST',
        url: URL,
        headers: header,
        data : {

        }

what you are really doing is:

axios({
            method: 'POST',
            url: URL,
            headers:  headers: {
                'Content-Transfer-Encoding': 'application/json',
                'content-type': 'application/json',
                'HTTP_API_KEY': 'xxxxx',
            },
            data : {

            }

So your header: instead of being Content-transfer etc... is just 'headers'

try this:

const header = {
                'Content-Transfer-Encoding': 'application/json',
                'content-type': 'application/json',
                'HTTP_API_KEY': 'xxxxx',
            }

also, i recommend you to do a console.log with your api call in order to find this problems faster and compare with postman, really helpful in develop phase (just use it in local, never push that log to production)