Angular2 post with mailchimp

Question

My post works in postman but doesn't work inside my app. What am I doing wrong?

let data = obj;
      let url = 'https://us123.api.mailchimp.com/3.0/lists/{somenumber}/members';
      let username: string = 'user';
      let password: string = 'mytokenhere';
      let headers = new Headers();
      headers.append("Authorization", "Basic " + btoa(username + ":" + password));
      headers.append("Content-Type", "application/x-www-form-urlencoded");
        return this._http.post(url, data, {headers: headers}).subscribe(
            data => this.response(data),
            error => this.response(error)
        );

I'm getting a CORS error in app:

'XMLHttpRequest cannot load https://us123.api.mailchimp.com/3.0/lists/ {{somenumber}}/members. Response to preflight request doesn't pass access control check: 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 501.'

Answer 1

Mailchimp doesn't support client side calls to their API. What you would need to do is setup a server that can proxy the requests from the browser to Mailchimp. There isn't much you can do client side to get it to work if the Mailchimp API doesn't provide the CORS response headers.

If your API that you create is on the same domain as the website, then the CORS issue would be eliminated (or you can also fix by setting the appropriate headers)

See the note under Authentication:

https://developer.mailchimp.com/documentation/mailchimp/guides/get-started-with-mailchimp-api-3/

More Info: https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/