Angular2-応答は、アクセス制御チェックに合格しない：いいえ「アクセス制御 - 許可 - 起源」ヘッダーは、要求されたリソース

Question

に存在している私は、これはポストで正常に動作している角度の2中のHTTP POSTを呼び出しています私はAngular 2でこのAPIコールを実装すると、No 'Access-Control-Allow'エラーが発生します。ここに私のコードは

私はこれを行うことができますか？単にヘッダを渡す代わりに

headers.append('Access-Control-Allow-Origin','*'); 

ようなオプション

getInspections(): Observable<IInspection[]> { 
     if (!this.inspections) { 
      let body =JSON.stringify({"Statuses":["Submitted", "Opened"]}); 
      let headers = new Headers({ 'Content-Type': 'application/json' }); 

      //headers.append('Access-Control-Allow-Origin','*'); 
      // let options = new RequestOptions({ headers:headers }); 

      return this.http.post(this._baseUrl + '/api/Inspect/ListI',body,headers) 
       .map((res: Response) => { 
        this.inspections = res.json(); 
        return this.inspections; 
       }) 
       .catch(this.handleError); 
     } 
     else { 
      //return cached data 
      return this.createObservable(this.inspections); 
     } 
    } 

Answer 1

CORSヘッダはサーバによって提供される必要があります。クライアントに追加するのは無意味です。

Answer 2

非標準ヘッダーを使用する場合（jsonは明らかに非標準と見なされます）、飛行前のチェックが行われ、要求されたアクション（この場合は「投稿」）が実行できるかどうかが尋ねられます。サーバだけが許容ヘッダで応答することができます。あなたの反応はサーバー言語によって異なります。私のwebapi2で私はあなたのウェブconfigedリスト（または発信者が存在する特定の場所）でlocalhostのREFを代わるライブサーバー用WebAppConfig

var cors = new EnableCorsAttribute("http://localhost:3000", "*", "GET, HEAD, OPTIONS, POST, PUT"); 
     cors.SupportsCredentials = true; 
     config.EnableCors(cors); 

注CORSを実装します。 SupportsCredentialsは、認証を使用している場合にのみ必要です。

飛行前のメッセージを処理するために、飛行前のメッセージを傍受し、投稿が進むための十分なデータを返すだけの方法をGlobals.asaxに追加しました。私は戻って、原点を反射することによって多少不正行為だということをここで

protected void Application_BeginRequest() 
    { 
     if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") 
     { 
      var origin = HttpContext.Current.Request.Headers["Origin"]; 

      Response.Headers.Add("Access-Control-Allow-Origin", origin); 
      Response.Headers.Add("Access-Control-Allow-Headers", "content-type, withcredentials, Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 
      Response.Headers.Add("Access-Control-Allow-Credentials", "true"); 
      Response.Headers.Add("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT"); 

      Response.Flush(); 
     } 
    } 

注 - これは、本番環境では安全ではありません、そうでなければ、セキュリティと緩すぎるつつある特定のサーバーをリストする必要があります。

は、いくつかのdevの詐欺があることに注意してください。 - あなたがlocalhost上のインターネットエクスプローラで（devの目的のために）走っているなら、他のほとんどのブラウザがそうしないポートを無視します。また、ヘッダーを追加するChromeのCORS拡張機能もあります。最後に、 '*'が返すコードをたくさん見ることができます（すべてを許可するために） - それらを使ってコードを動作させることができますが、リリース前にこれらをもっと積極的にロックします。