Angular2 HttpはフォームデータでPOSTリクエストを送信しません

Question

私はこの質問をstackoverflowに2回掲載しました。問題を理解していない人が投票しました。

問題

Moltin APIは唯一application/x-www-form-urlencodedとして来るルートhttps://api.molt.in/oauth/access_tokenに送信されたPOSTリクエストボディデータは、それがapplication/jsonをサポートしていないことを要求し、私にはわからない、なぜ原因私に聞かないでください。

私はangle2ですべてを満たす投稿要求を送信する必要があったので、以下のコードを使用しました。サーバーがエラー

XMLHttpRequest cannot load https://api.molt.in/oauth/access_token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 400.

このエラーがスローされた理由を返しますので、プリフライト中にブラウザが送信するため

let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}); 
let options = new RequestOptions({headers}); 

let body = { 
    client_id: env.MOLTIN_CLIENT_ID, 
    grant_type: 'implicit' 
} 

this.http.post('https://api.molt.in/oauth/access_token', body, options) 
    .subscribe((result) => { 
    console.log(result, 'result reached') 
    }, (err) => { 
    console.log(err, 'error reached'); 
    }); 

しかし、上記のコードが動作することはありません、FORMDATAが誤って解析され、ありますサーバーが認識しないOPTIONS要求。

JSON.stringify(body)を使用して本文の値をストリング化しようとしましたが、これは役に立ちませんでした。私がすることができないサードパーティのAPIを使用していますこと：

PS私は他の人がそれの恩恵を受けることができますので、私はこのポストを作っています理由です解決策を持って、私は注意してくださいすぐにまた

の下に掲載します何かを変更する

Answer 1

ドキュメントを数時間検索した後、私はURLSearchParamsを見つけて試してみることにしました。

は以下

let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}); 
let options = new RequestOptions({headers}); 
let body = new URLSearchParams(); 
body.append('client_id', env.MOLTIN_CLIENT_ID); 
body.append('grant_type', 'implicit'); 

this.http.post('https://api.molt.in/oauth/access_token', body.toString(), options) 
    .subscribe((result) => { 
    console.log(result, 'result reached') 
    }, (err) => { 
    console.log(err, 'error reached'); 
    }); 

Answer 2

@Jamesは、実際にあなたがあなたのWEBAPIプロジェクトにアクセス制御 - 許可 - 起源を有効にする必要があり、最終的なソリューションです。以下のコードはwebconfigファイルの下に追加します。

<configuration> 
    <system.webServer> 
    <httpProtocol> 
    <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
    </customHeaders> 
    </httpProtocol> 
</system.webServer> 
</configuration>