Angular 2 http request with Access-Control-Allow-Origin set to *

Question

I'm using angular2 and typescript.

I'm trying to post to my mail chimp subscription list.

My code so far:

 constructor(router: Router, http: Http){   
      this.router = router;

      this.http = http; 
      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
      this.headers.append('Access-Control-Allow-Origin', '*');
  }

  subscribe = () => {
        var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
        this.isSuccess = false;

        this.http.request(url, this.headers).subscribe(response => {
           console.log(response);
           this.isSuccess = true; 
        });   
  }

This is the error I get in my console:

I get this error now: Uncaught SyntaxError: Unexpected token <

Current code below:

export class Footer{
  email: string = "";
  router : Router;
  http : Http;
  jsonp: Jsonp;
  isSuccess: boolean = false;

  constructor(router: Router, jsonp: Jsonp, http: Http){   
      this.router = router;
      this.http = http; 
      this.jsonp = jsonp;
  }

  subscribe = () => {
        var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
        this.isSuccess = false;

        this.jsonp.request(url).subscribe(response => {
           console.log(response);
           this.isSuccess = true; 
        });   
  }

Epithelium

i think this problem in server properties see: #36825929 – Manchu

Please look below answer: Access Control Allow origin – Coleville

Answer 1

The Access-Control-Allow-Origin header is something that should be present in the response, not in the request.

If your service supports CORS, it must return it in the response headers to allow the request. So it's not a problem of your Angular application but it's something that must be handled at the server-side level...

If you need more details, you could have a look at this link:

• Understanding and using CORS - http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• Debugging CORS - http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Edit

It seems that thepoolcover.us10.list-manage.com doesn't support CORS but JSONP. You could try to refactor your code as described below:

constructor(private router: Router, private jsonp: Jsonp){   
}

subscribe = () => {
  var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
  this.isSuccess = false;

  this.jsonp.request(url, this.headers).subscribe(response => {
    console.log(response);
    this.isSuccess = true; 
  });   
}

Don't forget to specify JSONP_PROVIDERS when calling the bootstrap function.

See this link for more details:

• https://angular.io/docs/ts/latest/api/http/JSONP_PROVIDERS-let.html

Tisman

The above call is to mail chimp. Do you know why its complaining? I would of thought the mail chimp would be cross origin – Epithelium

That error was for trying jsonp, ive added my new code above – Epithelium

any ideas about the bug above screen shot? – Epithelium

Perhaps you could make a try with https://thepoolcover.us10.list-manage.com/subscribe/post-json instead of https://thepoolcover.us10.list-manage.com/subscribe/post... – Tisman

I browsed a bit the mailchimp docs and I think that you should use the MailChimp API instead. See this link: developer.mailchimp.com/documentation/mailchimp/guides/…. – Tisman

I'm just looking now. Have you found anything on subscribe to mail lists? I cant see anything – Epithelium

any ideas? I couldnt find anything for subscribe to a list – Epithelium

Answer 2

The problem is in the server side. You have to tell your service to accept GET requests. For example, in JEE with Spring you need to add just:

@CrossOrigin
@RequestMapping(value = "/something", method = RequestMethod.GET)

Stedmann