web-dev-qa-db-ja.com

Angular 2 Access-Control-Allow-Originが*に設定されたhttp要求

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

これはコンソールに表示されるエラーです。

enter image description here

今、このエラーが表示されます：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; 
        });   
  }
angularangular-http
16
AngularM

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

bootstrap関数を呼び出すときにJSONP_PROVIDERSを指定することを忘れないでください。

詳細については、次のリンクを参照してください。

20
Thierry Templier

問題はサーバー側にあります。 GETリクエストを受け入れるようにサービスに指示する必要があります。たとえば、Springを使用するJEEでは、以下を追加するだけです。

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