2016-06-23 16 views
0

私はJIRAボード用のD3ビジュアライゼーションプロジェクトを開発しようとしていますが、最初のハードルには負けてしまいました。 JIRAボードの認証と取得に問題があります。JIRA REST APIを照会する奇数CORSエラー

このコードは完全にクライアント側で、角2 RCである3.私のサービスは、次のようになります。

public authenticate(username:string, password:string):void { 
    let encodedAuth:string = window.btoa(`${username}:${password}`); 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Authorization', `Basic ${encodedAuth}`); 
} 

public getAllBoards():Observable<Boards> { 
    return this.http.get(`http://${this.host}/rest/agile/1.0/board`, this.headers) 
     .map(response => response.json() as Boards) 
} 

、私のコンポーネントのコードは次のようになります。残念ながら

constructor(protected jiraService:JIRAService) { 
    this.jiraService.authenticate('[email protected]', 'password'); 
    this.jiraService.getAllBoards().subscribe(
     boards => this.boards = boards 
    ); 
} 

これは私のブラウザでCORSエラーのように見えるものを生成します:

XMLHttpRequest cannot load https://myjira.atlassian.net/rest/agile/1.0/board. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401. 

...少し不安ですxpected。ブラウザのこの同じURLは問題なく動作します。チャールズのリクエストを調べると、「このホストでSSLプロキシが有効になっていません:プロキシの設定、SSLの場所で有効になっています」というエラーが表示されますが、実際にこの設定を見つけることはできません。チャールズで実際に見ることができないのであれば、私は気にしません。

私はいくつかのnpm JIRAパッケージを試しましたが、いずれも注目すべきものではなく、サーバー側の開発用に設計されているようです。

大変助かりました。

+0

WebAPIを使用しているとき、サーバが500を返した場合、この種のCORSエラーが発生します。ブラウザで同じURLが使用されているとします。カスタムヘッダーを追加するにはPostmanのようなツールを使用しましたか?通常のブラウザウィンドウ? –

+0

ブラウザで郵便番号と直接URLの両方を使用しました。 – serlingpa

答えて

0

最初に別のURLからロードされたアプリケーション内からアクセスすると、このエラーが発生します。この「他の」URLから新しいページをロードすると、最初のページの読み込みはすでにこのURLから行われているため、CORSの状況ではありません。

サーバーは、この要求を可能にするためにブラウザに必要なCORSヘッダーを提供する必要があります。これはAngularの問題ではなく、サーバーの問題のみです。

回避策は、JSONP(カスタムヘッダーをサポートしていません)

  • が、その後転送し、他のサーバーにして、応答転送し、あなたの角度アプリケーションがサーバーへの呼び出しをサポートするサーバー側に提供

    • ですAngularアプリケーションに到達します。
  • 関連する問題