3

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

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 拡張プラグインを使用しようとしました。このエラーがスローされます。

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

私が間違ったことをしているかどうかはわかりません。とにかく、mailchimpサーバーへのサーバー側呼び出しを作成せずに機能させることができるのでしょうか? ありがとう。

4

1 に答える 1

3

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() });

  }
}

古いバージョンの ng2 を使用した動作中の Plnkr

リクエストは、コンポーネントのコンストラクター以外の場所 (サービスなど) で行う必要がありますが、簡単で汚い例のためです。

注:これはAngular 2 の古いバージョンを使用した例から変換された未テストのコードですが、概念は引き続き機能するはずです。

于 2016-09-17T04:59:02.220 に答える