Cross-Origin Request Blocked on Vuejs with axios

Question

I'm using Vuejs and axios to make web requests, so far i'm able to GET, POST and PUT but i have now to upload media on server and the server requires to request (2 steps) to be sent in order to upload the image.

On first steps I'm able to get the upload url link from server inside my promise send the required headers. On step 2 i just need to PUT that url i get from step 1 and PUT the image file, along with the same headers i sent on step 1.

I get the Cross-Origin Request Blocked request and I don't know what is causing my problem.

Here is my 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 is ok i can get the returned url
                content_type: self.image.type
                }, config). //here is first step
            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 - Headers are not showing on "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 can't see my headers on request headers :

Answer 1

The HTTP method OPTIONS do not allow you to send to server,add OPTION method in Access-Control-Allow-Methods header should resolve this problem.

Hope this helps.