Put API KEY in axios

Question

I just started learn React but I have problem when I trying to make a request to the CoinMarketCap API with axios and tried several ways to set my API key. I have also also tried on Postman but message appears API key missing.

export const apiBaseURL = 'https://pro.coinmarketcap.com';

Tried like this

dispatch({ type: FETCHING_COIN_DATA })
return axios.get(`${apiBaseURL}/v1/cryptocurrency/map`, 
{ headers = 
{ 'X-CMC_PRO_API_KEY': 'apicode', } 
})

this

dispatch({ type: FETCHING_COIN_DATA })
let config = { 'X-CMC_PRO_API_KEY': 'apicode' };
return axios.get(`${apiBaseURL}/v1/cryptocurrency/map`, { headers: config })

and this

dispatch({ type: FETCHING_COIN_DATA })
return axios.get(`${apiBaseURL}/v1/cryptocurrency/map?X-CMC_PRO_API_KEY=apicode`)

Thank you

Answer 1

The short answer to adding an X-Api-Key to an http request with axios can be summed up with the following example:

        const url =
          "https://someweirdawssubdomain.execute-api.us-east-9.amazonaws.com/prod/custom-endpoint";

        const config = {
          headers: {
            "Content-Type": "application/json",
          },
        };

        // Add Your Key Here!!!
        axios.defaults.headers.common = {
          "X-API-Key": "******this_is_a_secret_api_key**********",
        };

        const smsD = await axios({
          method: "post",
          url: url,
          data: {
            message: "Some message to a lonely_server",
          },
          config,
        });

Adding the key to the default headers was the only way I could get this to work.

Answer 2

I realize this has been solved; for the sake of alternatives here is how I did it. I created a instance of axios in /includes/axios:

import axios from "axios";

const instance = axios.create({
    baseURL: "https://example.com/api",
    headers: {
        "Content-Type": "application/json",
        "x-api-key": "****API_KEY_HERE****",
    },
});

export default instance;

Now axios can be imported anywhere in the project with the give configuration. Ideally you want to add your secret to the ENV variable for security reasons.