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

i think this problem in server properties see: stackoverflow.com/questions/36825429/… — Emir Mamashov
– Emir Mamashov, Commented Nov 7, 2016 at 12:46

Thierry Templier · Accepted Answer · 2016-11-01 19:27:38Z

20

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

edited Nov 1, 2016 at 19:27

answered Feb 2, 2016 at 14:14

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AngularM Over a year ago

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

AngularM Over a year ago

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

AngularM Over a year ago

any ideas about the bug above screen shot?

Thierry Templier Over a year ago

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...

Thierry Templier Over a year ago

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/….

|

tuomastik · Accepted Answer · 2017-07-03 14:35:35Z

1

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)

edited Jul 3, 2017 at 14:35

tuomastik

4,9856 gold badges46 silver badges52 bronze badges

answered Jul 3, 2017 at 13:45

zoubir REMILA

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related