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

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

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)