Edit: Is it possible that this is a CORS issue, considering I am on localhost...
When using Javascript, I have the ability to define request headers and handle responses like this:
$(function() {
var params = {
// Request parameters
};
$.ajax({
url: "https://demo-api.com/",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");
},
type: "GET",
data: "{body}",
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
My Inquiry:
I am interested in learning VueJs and wish to replicate the above functionality using VueJs + Axios. However, I am unsure about how to set the request headers just like in the previous JavaScript code.
Below is my unsuccessful attempt:
new Vue({
el: '#app',
data () {
return {
info: null,
loading: true,
errored: false,
response: false
}
},
mounted () {
axios({
method: 'get',
url: 'https://demo-api.com/',
headers: {
'Ocp-Apim-Subscription-Key': 'API KEY',
}
})
.then(response => {
console.log(response)
this.response = true
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
How can I specifically define the request headers as shown in the original JavaScript code? I am eager to understand how to incorporate the following functionality into Vue/Axios.
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");
Thank you.