使用 axios 在 Vuejs 上阻止跨域请求

Question

我正在使用 Vuejs 和 axios 发出 Web 请求，到目前为止，我能够 GET、POST 和 PUT，但我现在必须在服务器上上传媒体，服务器需要请求（2 个步骤）才能发送上传图片。

在第一步中，我可以在我的承诺中从服务器获取上传 url 链接，发送所需的标头。在第 2 步中，我只需要 PUT 从第 1 步获得的网址并放入图像文件，以及我在第 1 步中发送的相同标题。

我收到了 Cross-Origin Request Blocked 请求，但我不知道是什么导致了我的问题。

这是我的代码：

 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)
        });

    },

我在request headers 上看不到我的标题：

Answer 1

HTTP 方法OPTIONS 不允许您发送到服务器，在Access-Control-Allow-Methods 标头中添加OPTION 方法应该可以解决此问题。

希望这会有所帮助。