Mailchimp注册表单与angular2

我想嵌入一个mailchimp注册表单到我的angular2应用程序。Mailchimp注册表单与angular2

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

我被困在做一个HTTP POST调用mailchimp服务器。我在这里引用angular2指南：https://angular.io/docs/ts/latest/guide/server-communication.html

这是我在data.service中的代码。

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


addSubscriber(): Observable<string> { 
     let body = JSON.stringify({ "EMAIL" : "[email protected]" }); 
     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引发错误。我曾尝试使用Chrome扩展插件来尝试并测试http调用是否正常。它抛出这个错误。

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服务器？谢谢。

来源

2016-09-17 slvn dev

你应该能够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 protected]&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，但这个概念应该仍然有效。

来源

2016-09-17 04:59:02

谢谢@Steve。我后来发现了另一个类似的问题。 [链接]（http://stackoverflow.com/questions/35180562/i-need-to-do-a-http-request-to-a-mail-chimp-subscription-list-via-a-component-po/ 35181085＃35181085） –

感谢您的跟进，@slvndev！我已经把这个问题标记为重复http://stackoverflow.com/questions/35180562/i-need-to-do-a-http-request-to-a-mail-chimp-subscription-list-via- a-component-po/35181085＃35181085将这两个问题联系在一起。希望这会使未来更容易找到答案。 –

Mailchimp注册表单与angular2

回答

相关问题