Angular 2 HTTP-запрос с Access-Control-Allow-Origin установлен в *

Я использую angular2 и typescript.

Я пытаюсь опубликовать в своем списке подписки на шимпанзе.

Мой код:

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

Это ошибка, которую я получаю в консоли:

введите описание изображения здесь

Я получаю эту ошибку: Uncaught SyntaxError: Неожиданный токен <

Текущий код ниже:

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

Ответы

Ответ 1

Заголовок Access-Control-Allow-Origin - это то, что должно присутствовать в ответе, а не в запросе.

Если ваша служба поддерживает CORS, она должна вернуть ее в заголовках ответов, чтобы разрешить запрос. Так что это не проблема вашего приложения Angular, но это то, что нужно обрабатывать на уровне сервера...

Если вам нужна дополнительная информация, вы можете посмотреть эту ссылку:

Edit

Кажется, что thepoolcover.us10.list-manage.com не поддерживает CORS, а JSONP. Вы можете попытаться реорганизовать свой код, как описано ниже:

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

Не забудьте указать JSONP_PROVIDERS при вызове функции bootstrap.

См. эту ссылку для получения более подробной информации:

Ответ 2

Проблема на стороне сервера. Вы должны сообщить своей службе о принятии запросов GET. Например, в JEE с Spring вам нужно просто добавить:

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