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

我正在使用Vuejs和axios发出web请求，到目前为止我能够GET，POST和PUT，但现在我已经在服务器上上传媒体，服务器需要请求（2步）以便上传图像。使用axios阻止Vuejs上的跨源请求

第一步我可以从我的承诺发送所需的标题从服务器上载url链接。在第2步，我只需要把PUT从步骤1得到的网址和PUT图像文件，以及我在步骤1发送的相同头文件。

我得到了跨源请求被阻止的请求，但我没有知道是什么导致我的问题。

这里是我的代码：

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标题：

来源

2017-10-16 Muli

让我们[在聊天中继续讨论]（http://chat.stackoverflow.com/rooms/156852/discussion-between-thanksd-and-muli）。 – thanksd

的HTTP方法OPTIONS不允许你发送服务器，添加OPTION方法Access-Control-Allow-Methods头应该可以解决这个问题。

希望这会有所帮助。

来源

2017-10-18 18:26:36

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

回答

相关问题