Set headers in POST request using axios in react-native

Question

I am facing weird problem in react-native using axios I have one Hub in which I need to make post request to register puck when I try with Postman it works perfectly but when I try from Ipad simulator it throws me this response:

{"data":{"jsonrpc":"2.0","id":"27316","error":{"code":1,"message":"Missing PLSType field","data":null}},"status":200,"headers":{"plsversion":"20190607","content-type":"application/json","server":"akka-http/10.1.8","plstype":"64","plsname":"ThinkinMiddleware","date":"Thu, 06 Feb 2020 11:01:19 GMT","content-length":"95"},"config":{"url":"http://192.168.20.229:8383","method":"post","data":"{\"jsonrpc\":\"2.0\",\"id\":\"27316\",\"method\":\"crManagementExtension\",\"params\":{\"mode\":1,\"puck\":{\"id\":\"DBC0000000fa\",\"number\":13}}}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json","PLSType":32,"PLSName":"cash-559892","PLSVersion":"1.2.3.4"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1},"request":{"UNSENT":0,"OPENED":1,"HEADERS_RECEIVED":2,"LOADING":3,"DONE":4,"readyState":4,"status":200,"timeout":0,"withCredentials":true,"upload":{},"_aborted":false,"_hasError":false,"_method":"POST","_response":"{\"jsonrpc\":\"2.0\",\"id\":\"27316\",\"error\":{\"code\":1,\"message\":\"Missing PLSType field\",\"data\":null}}","_url":"http://192.168.20.229:8383","_timedOut":false,"_trackingName":"unknown","_incrementalEvents":false,"responseHeaders":{"PLSVersion":"20190607","Content-Type":"application/json","Server":"akka-http/10.1.8","PLSType":"64","PLSName":"ThinkinMiddleware","Date":"Thu, 06 Feb 2020 11:01:19 GMT","Content-Length":"95"},"_requestId":null,"_headers":{"accept":"application/json, text/plain, */*","content-type":"application/json","plstype":"32","plsname":"cash-559892","plsversion":"1.2.3.4"},"_responseType":"","_sent":true,"_lowerCaseResponseHeaders":{"plsversion":"20190607","content-type":"application/json","server":"akka-http/10.1.8","plstype":"64","plsname":"ThinkinMiddleware","date":"Thu, 06 Feb 2020 11:01:19 GMT","content-length":"95"},"_subscriptions":[],"responseURL":"http://192.168.20.229:8383/"}}

what I can see in this log is that the PLSType field is Missing meaning that the header PLSType is not set.

but when I try with Postman I get this response:

{
    "jsonrpc": "2.0",
    "id": 1234,
    "result": {
        "status": 10,
        "puck": {
            "battery": 100,
            "colors": null,
            "location": null
        }
    }
}

and this is the function that is executed:

axios.post(
          "http://192.168.20.229:8383",
          {
            jsonrpc: "2.0",
            id: "27316",
            method: "crManagementExtension",
            params: {mode: 1, puck: {id: "DBC0000000fa", number: 13}},
          },
          {
            headers: {
             "Content-Type": "application/json",
             PLSType: 32,
             PLSName: "cash-559892",
             PLSVersion: "1.2.3.4",
            }
          },

        ).then(response => {
          console.log('response sukses')
          console.log(JSON.stringify(response));
          // return resolve(response);
        })
        .catch(error => {
            console.log('error while registering puck sukses')
          console.log(error);
          // reject(error);
        });

I tried exact the same function in React JS and it works.

Aung Khant Zaw · Accepted Answer · 2020-05-12 11:54:10Z

1

Try adding this in headers.

'Accept-Encoding': 'gzip, deflate, br'

answered May 12, 2020 at 11:54

Aung Khant Zaw

519 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IJustDev Over a year ago

I have the same issue and on my side this doesn't work

IJustDev · Accepted Answer · 2022-08-25 07:25:47Z

0

I've got the exact same problem. Even using fetch doesn't make things easier.

I have tried it with Postman aswell and to me it looks like the headers are passed wrong from the Android/IPad/iOS default http client.

Inspecting the request object won't tell you any differences in the request compared to the one from Postman.

I will verify my thesis this evening by checking the actual request that goes out to the server.

Just to be found by others stumbling across. I am getting HTTP error 406. Since the client is doing some weird shit no other client does.

It's neither the cleartext flag for your Android permissions, nor gzipping AFAIK.

answered Aug 25, 2022 at 7:25

IJustDev

1211 silver badge11 bronze badges

1 Comment

IJustDev Over a year ago

The only thing that comes to my mind is a misformed Content-type or Accept header, parsed wrong by Axios and fetch...

Collectives™ on Stack Overflow

Set headers in POST request using axios in react-native

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related