[Vuejs]-VueJs Axios – Request headers

Difference between the created and mounted events in Vue.js

Read an answer and try to use created() lifecycle hooks instead of mounted()

Furthermore, you can create separate instance of axios for request with this header and then use it inn you code:

axios-demo-api.js

import axios from 'axios'

const instance = axios.create({
    baseURL: 'https://demo-api.com',
    headers: {'Ocp-Apim-Subscription-Key': 'API KEY'} //don't forget to change API key to your exact key
})

export default instance

Usage:

import axiosInstance from 'axios-demo-api';


export default {

 created() {
  axiosInstance.get('/{demoId}?' + $.param(params))
                .then(response => {
              console.log(response)
              this.response = true
            })
            .catch(error => {
              console.log(error)
              this.errored = true
            })
            .finally(() => this.loading = false)
 }
}

Your problem is not the header. You are setting it properly. It has to do with the URL. You are constructing your URL like this:

url: 'https://demo-api.com/{demoId}?" + $.param(params)',

Your URL string is wrong. It has an extra quote at the end. That’s why you got 404 error. This is what you need to do:

url: "https://demo-api.com/{demoId}?" + $.param(params),

Also, if you are using Vue and not jQuery, then you should not use $.param function. Instead, use a proper query string module like qs. So your actual URL would be like:

url: `https://demo-api.com/${demoId}?${qs.stringify(params)}`,

Here we are using ES2015 string interpolation.