Currently, I am utilizing Vuejs and axios for handling web requests. So far, I have successfully managed to perform GET, POST, and PUT operations. However, the new challenge that I am facing is uploading media to the server. The server necessitates sending two-step requests in order to upload an image.
During the first step, I can acquire the upload URL link from the server within my promise and send the requisite headers. For the second step, all I need to do is use the obtained URL from step one and PUT the image file along with the same headers sent during the first step.
Unfortunately, I am encountering a Cross-Origin Request Blocked error and I am unsure of the root cause of this issue.
Below is the snippet of code:
onPickFile() {
var accessToken
var self = this;
firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function(idToken) {
accessToken = idToken
console.log("Id: " + self.id)
console.log("Token : " + accessToken)
var config = {
headers: {
'Authorization': 'Bearer ' + accessToken,
'Content-Type': self.image.type,
'Media-Type': 'profile_image',
'x-goog-meta-media-type': 'profile_image',
'x-goog-meta-uid': self.id,
}
}
console.log(config)
axios.post('apilink', { // Step 1 - This step successfully returns the URL
content_type: self.image.type
}, config). // First step completed
then(response => {
console.log("Response URL is: " + response.data.upload_url)
self.uploadUrlLink = response.data.upload_url
console.log("Id: " + self.id)
var config_2 = {
headers: {
'Authorization': 'Bearer ' + accessToken,
'Content-Type': self.image.type,
'Media-Type': 'profile_image',
'x-goog-meta-media-type': 'profile_image',
'x-goog-meta-uid': self.id,
}
}
console.log(config_2)
axios.put(self.uploadUrlLink, self.image , config_2) // Step 2 - Issue with headers not showing up in "request headers"
.then(response => {
console.log("Response on PUT Image OK: " + response)
})
.catch(e => {
console.log("Error on PUT image: " + e)
});
})
.catch(e => {
console.log("Error on response on POST Image first step: " + e)
});
}).catch(function(error) {
console.log("Error on getting token: " + error)
});
},
I am unable to view my headers under request headers: