Mailchimp 가입 양식 (angular2 포함)

Question

mailchimp 가입 양식을 내 angular2 응용 프로그램에 포함하려고합니다.

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

는 내가 서버를 메일 침프하기 위해 HTTP 게시 호출을하고에 붙어있다. 나는 여기서 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 호출이 작동하는 경우 크롬 확장 플러그인을 사용하여 테스트를 시도했습니다. 이 오류가 발생합니다.

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으로 변환되었지만 개념은 여전히 ​​작동해야합니다.