Mailchimpサインアップフォームwith angular2

Question

私は、mailchimpサインアップフォームを私のangular2アプリケーションに埋め込もうとしています。

http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website

私は、サーバーをmailchimpにHTTP POST呼び出しを行うに立ち往生しています。私はここでangular2ガイドを参照しています：https://angular.io/docs/ts/latest/guide/server-communication.html

これは私のコードdata.serviceです。

private mailChimpUrl = 'http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=xxxxxxxxxxxxxxxxx'; 


addSubscriber(): Observable<string> { 
     let body = JSON.stringify({ "EMAIL" : "abcdefg@hijk.com" }); 
     let headers = new Headers({'Content-Type': 'application/json'}); 
     let options = new RequestOptions({headers: headers}); 

     return this.http.post(this.mailChimpUrl, body, options) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

CORSのためにブラウザでエラーが発生することをご理解ください。 httpコールが動作しているかどうか試してみるためにchrome extensionプラグインを使用しようとしました。このエラーが発生します。

XMLHttpRequest cannot load http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=xxxxxxxxxxxxxxxxx. Response for preflight has invalid HTTP status code 501 

私が間違っているかどうかはわかりません。どうにか私はそれをmailchimpサーバーへのサーバー側の呼び出しを作成せずに動作させることができますか？ありがとう。

Answer 1

あなたはJSONPリクエストでこれを達成することができる必要があります：

import {Component} from '@angular/core'; 
import {Jsonp} from '@angular/http'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     Result: {{result | json}} 
     </div> 
    ` 
}) 
export class AppComponent { 
    constructor(jsonp:Jsonp) { 
    var url = 'https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=templth@yahoo.fr&c=JSONP_CALLBACK'; 
    jsonp.request(url, { method: 'Get' }) 
     .subscribe((res) => { this.result = res.json() }); 

    } 
} 

Working Plnkr using an older version of ng2

要求がどこか他のコンポーネントのコンストラクタ以外の製（例えばサービス。）が、ためにする必要がありますすばやく汚れた一例です。

注：これはfrom an example using an older version of Angular 2に変換されたテストされていないコードですが、コンセプトはまだ有効です。