CODEWITHSUNDEEP
javascriptjsonreactjsaxios
Shashank Dubey
Shashank Dubey

Reputation: 353

How to pass headers in axios as secret-key

I am using jsonbin.io and hosted a json data as private bin. I am calling a axios get request to fetch that data. I have to pass my secret-key in headers as

headers{ secret-key: mysecretkey }

but axios does not allow key in header as secret-key 

const secretKey = process.env.REACT_APP_SECRET_KEY;
const localUrl = process.env.REACT_APP_LOCAL_URL;

const fetchPhotosFlocal = async () => {
  const response = await axios.get(localUrl, {
     headers: {
        secret-key: secretKey,
     },
  });
  console.log(response);   };

secret-key gives error at compile time and "secret-key" can not fetch data what should i do now ?

Upvotes: 0

Views: 4358

Answers (4)

Sakhawat Hossain Sohel
Sakhawat Hossain Sohel

Reputation: 335

You can set a secret key globally.

export const baseAxios = axios.create({

  baseURL: 'http://localhost:3000',

  headers: {
    'secret-key': 'secretKey',
  },

});

Then call >

 const fetchPhotosFlocal = async () => baseAxios.get(localUrl);
    
    const resp = await fetchPhotosFlocal();
    console.log(resp);

Upvotes: 0

Shashank Dubey
Shashank Dubey

Reputation: 353

Problem solved i checked their documentation they are passing secret_key in string code.

req.setRequestHeader("secret-key", "<SECRET_KEY>");

This runs fine

const secretKey = process.env.REACT_APP_SECRET_KEY;
const localUrl = process.env.REACT_APP_LOCAL_URL;
const fetchPhotosFlocal = async () => {

const response = await axios.get(localUrl, { 
headers: {
    "secret-key": secretKey,
 },
  });
  console.log(response); };

Upvotes: 1

Kai
Kai

Reputation: 3663

it should be 

const fetchPhotosFlocal = async () => axios.get(localUrl, {
     headers: {
        'secret-key': secretKey,
     },
  });

const resp = await fetchPhotosFlocal();
console.log(resp);

Upvotes: 1

Oursin
Oursin

Reputation: 141

secret-key is not a valid identifier in JavaScript, as they cannot contain hyphens (see the specification for more details.

In your case, you can simply put the name of your header in quotes, like this:

const secretKey = process.env.REACT_APP_SECRET_KEY;
const localUrl = process.env.REACT_APP_LOCAL_URL;

const fetchPhotosFlocal = async () => {
  const response = await axios.get(localUrl, {
     headers: {
        "secret-key": secretKey,
     },
  });
  console.log(response);   
};

Upvotes: 2

Related Questions