HTTP-запрос Angular 2 с 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: Unexpected token ‹

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

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

angular angular-http
person AngularM    schedule 02.02.2016    source источник
comment
я думаю, что эту проблему в свойствах сервера см.: stackoverflow.com/questions/36825429/   -  person Emir Mamashov    schedule 07.11.2016
comment
Пожалуйста, посмотрите ответ ниже: Access Control Allow origin   -  person thangavel .R    schedule 02.03.2017

Ответы (2)


arrow_upward
20
arrow_downward

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

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

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

Изменить

Похоже, что 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.

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

person Thierry Templier    schedule 02.02.2016
comment
Вышеприведенный вызов предназначен для отправки по почте шимпанзе. Знаете, почему он жалуется? Я бы подумал, что почтовый шимпанзе будет перекрестного происхождения - person AngularM; 02.02.2016
comment
Эта ошибка была связана с попыткой jsonp, я добавил свой новый код выше - person AngularM; 02.02.2016
comment
какие-нибудь идеи по поводу ошибки на скриншоте выше? - person AngularM; 02.02.2016
comment
Возможно, вы могли бы попробовать с https://thepoolcover.us10.list-manage.com/subscribe/post-json вместо https://thepoolcover.us10.list-manage.com/subscribe/post... - person Thierry Templier; 02.02.2016
comment
Я немного просмотрел документы mailchimp и думаю, что вместо этого вам следует использовать API MailChimp. См. эту ссылку: developer.mailchimp.com /documentation/mailchimp/guides/. - person Thierry Templier; 02.02.2016
comment
Я просто смотрю сейчас. Вы нашли что-нибудь о подписке на списки рассылки? я ничего не вижу - person AngularM; 02.02.2016
comment
Любые идеи? Я не мог найти ничего для подписки на список - person AngularM; 03.02.2016

arrow_upward
1
arrow_downward

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

@CrossOrigin
@RequestMapping(value = "/something", method = RequestMethod.GET)
person zoubir REMILA    schedule 03.07.2017