使用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上的跨源請求

回答

相關問題