javascriptnode.jsaxioshttp-headershttp-status-code-400

Place Key and Value in Headers in Axios request


Expected
How to place key and value as header in Axios request.

Action
I have this API endpoint
https://netsocial-129849.uc.r.appspot.com/api/v1/posts
To get a response I need to pass key with value of Authorization and value with value of 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG

In my mobile app I use Axios request

export default axios.create({
    baseURL: 'https://netsocial-129849.uc.r.appspot.com/api/v1/posts',
    headers: {
        Authorization: 'Bearer 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG',
    }
});

Output

Possible Unhandled Promise Rejection (id: 0):
Error: Request failed with status code 400

55: Error: Request failed with status code 400 at createError (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200434:17) at settle (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200424:14) at EventTarget.handleLoad (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200322:9) at EventTarget.dispatchEvent (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:34182:27) at EventTarget.setReadyState (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33251:14) at EventTarget.__didCompleteResponse (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33093:16) at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33203:47 at RCTDeviceEventEmitter.emit (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:7046:37) at MessageQueue.__callFunction (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2789:44) at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2511:17
config: {url: "/", method: "get", headers: {…}, baseURL: "https://netsocial-129849.uc.r.appspot.com/api/v1/posts", transformRequest: Array(1), …}
isAxiosError: true
request: EventTarget {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4, …}
response: {data: "Invalid token.", status: 400, statusText: undefined, headers: {…}, config: {…}, …}
toJSON: ƒ ()
message: "Request failed with status code 400"
stack: "Error: Request failed with status code 400↵    at createError (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200434:17)↵    at settle (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200424:14)↵    at EventTarget.handleLoad (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200322:9)↵    at EventTarget.dispatchEvent (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:34182:27)↵    at EventTarget.setReadyState (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33251:14)↵    at EventTarget.__didCompleteResponse (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33093:16)↵    at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33203:47↵    at RCTDeviceEventEmitter.emit (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:7046:37)↵    at MessageQueue.__callFunction (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2789:44)↵    at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2511:17"
__proto__: Object

Client Side using React Native

import React, { useState } from 'react';
import { View, Text, StyleSheet} from 'react-native';
import netsocial from '../api/netsocial';

const NetSocialApi = () => {
    const [results, setResults] = useState([]);
    const searchApi = async() => {
        const response = await netsocial.get('/');
        setResults(response.data);
    }
    searchApi();
    console.log("result", results);
    console.log("search", searchApi());
    return (
        <View>
            <Text>{results}</Text>
        </View>
    );
}

export default NetSocialApi;

Solution

  • There is no error with the way your axios request is being done. You just need to use promises along with it like-

    axios.create({
        baseURL: 'https://netsocial-129849.uc.r.appspot.com/api/v1/posts',
        headers: {
            Authorization: 'Bearer 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG',
        }
    })
    .then((data) => {
        console.log(data);
      }).catch((error)=>{
         console.log("Error");
      });