Угловой запрос 2-х запросов с доступом -Применение-Разрешить-Происхождение установлено на *

Question

Я использую angular2 и машинопись.

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

Мой код до сих пор:

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

Это ошибка я получаю в моей консоли:

Я получаю эту ошибку прямо сейчас: неперехваченным 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; 
     }); 
    } 

Answer 1

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

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

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

• Понимание и использование 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/

Редактировать

Кажется, что 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.

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

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

Answer 2

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

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