VueリソースクロスサイトHTTPリクエスト

Question

通常、非ローカルサーバーにjQueryリクエストを送信すると、Cross-site HTTP requestルールが適用され、最初にエンドポイントの存在を確認するOPTIONSリクエストが送信され、リクエストが送信されます。

GET to domain.tld/api/get/user/data/user_id 

jQueryはうまく動作しますが、リクエストに対処するためにVueリソースを使用したいと思います。私のネットワークログでは、実際にリクエストが行われているだけです（最初にOPTIONSリクエストはありません）、データは受信されていません。

誰もがこれを解決する方法を持っていますか？

サンプルコード：

   var options = { 
       headers: { 
        'Authorization': 'Bearer xxx' 
       } 
      }; 
      this.$http.get(config.api.base_url + 'open/cities',[options]) 
       .then(function(response){ 
        console.log('new request'); 
        vm.cities = response; 
       }, function(error){ 
        console.log('error in .js:'); 
        console.log(error); 
       }); 

jquery-request

ソリューション：

@Antonが述べたように、それは両方の要求（環境無視できる）を持っている必要はありません。それを動作させるために私が何を変えたのかはわかりませんが、要求は私にエラーを与えました。ヘッダーを正しく設定していました。ヘッダは、オプションとしてではなく、HTTPのプロパティとして渡すべきではありません。

this.$http({ 
    root: config.api.base_url + 'open/cities', // url, endpoint 
    method: 'GET', 
    headers: { 
    'Authorization': 'Bearer xxx' 
    } 
}).then(function(response){ 
        console.log('new request'); 
        vm.cities = response; 
       }, function(error){ 
        console.log('error in .js:'); 
        console.log(error); 
       }); 

は皆さんに感謝、それはチームの努力だった:)

Answer 1

は、それは追加のOPTIONS要求がなされている要件ですか？あなたが見ることができるように、データは非ローカルサーバからロードされている

https://jsfiddle.net/ct372m7x/2/

：私は正常に動作し、データを取得し、小さな（32 LOC）の例を作成しました。この例はjsfiddle.netにあり、リクエストはhttpbin.orgになります。これによりCORSが適用されます（Access-Control-Allow-Originヘッダーは下のスクリーンショットにあります）。

さらに、GETリクエストのみが実行されていることがわかります。その前にはOPTIONSはありません。