Question

我正在使用Vuejs和axios发出网络请求，到目前为止我能够进行GET，POST和PUT，但我现在要在服务器上传媒体，服务器要求（2个步骤）发送为了上传图片。

在第一步，我能够从我的承诺内的服务器获取上传URL链接发送所需的标题。在第2步，我只需要输入从第1步获得的URL并将图像文件与我在步骤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方法for x in $(seq 0 4); do # increment the port number port=$((9220 + $x)) sudo docker run -it -d --restart=always \ -p=0.0.0.0:$port:9222 \ -m 1G \ -v /tmp/chromedata/:/data \ --name container-$x \ alpeware/chrome-headless-trunk done不允许您发送到服务器，在OPTIONS标头中添加OPTION方法应解决此问题。

希望这有帮助。

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

1 个答案: