奇形を持つVuejsでブロックされたクロスオリジンリクエスト

Question

私はVuejsとAxiosを使ってWebリクエストを作成していますが、これまで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メソッドOPTIONSAccess-Control-Allow-MethodsにOPTION方法を追加し、サーバーに送信することはできません。ヘッダがこの問題を解決するはずです。

これが役に立ちます。