Angular2：X-XSRF-TOKENはアクセス制御許可ヘッダーで許可されていません

Question

クロスサイトAPI呼び出しを実装しているので、今日この問題で苦労しています。最悪の事態は、それは私のローカル環境からうまく動作しますが、一度Herokuの上、それは次のエラーで失敗している。ここで

XMLHttpRequest cannot load https://restcountries.eu/rest/v1/all . Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

は、呼び出しをトリガー機能である：

let observable = this._http 
    .get(GEO_API_URL + query) 
    .map(response => response.json()) 
    .do(val => { 
     this.cache = val; 
     observable = null; 
    }) 
    .share(); 

    return observable; 

任意のアイデア？

ありがとうございました。

Answer 1

は、私の場合は、 'アクセス制御 - 許可 - ヘッダ' ヘッダに 'X-XSRFトークン' の値を追加する必要がありました：

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token') 

はAngularJS: POST Data to External REST API

Answer 2

が同じだった見ます問題。
私の場合、理由は私のChromeのCookieがX-XSRF-TOKENフィールドに保存されていたためです。そして、どういうわけかChromeはOPTIONリクエストにヘッダー 'Access-Control-Request-Headers：x-xsrf-token'を追加しました。 Firefoxでは、シークレットモードのChromeでも同じページが正常に動作します。
このCookieフィールド（X-XSRF-TOKEN）だけを削除しました。それだけです。

Answer 3

これはjavaで私を助けました（ヘッダーを公開してからallowヘッダーに含める）。そして、これはあなたのHttpResponseオブジェクトに表示されます：

response.addHeader("Access-Control-Expose-Headers", "header1"); 
response.addHeader("Access-Control-Expose-Headers", "header2"); 
    response.addHeader("Access-Control-Expose-Headers", "header3"); 
       response.addHeader("Access-Control-Allow-Headers", "Origin, header1, header2, header3, X-Requested-With, Content-Type, Accept"); 

Answer 4

クライアント（角4）

@Injectable() 
export class HttpService { 
    private actionUrl: string; 
    private headers: Headers; 
    private options: RequestOptions; 

    constructor(public _http: Http) { 
    this.actionUrl = 'example.com'; 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Accept', 'application/json'); 
    this.headers.append('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN'); 
    this.options = new RequestOptions({ headers: this.headers }); 
    } 

サーバー

GET、POST

1）アクセス制御-Allow-を原産地： '*'

OPTIONS

1）アクセス制御 - 許可 - 起源： '*'

2）アクセス制御 - 許可 - ヘッダ「Content-Typeの、X-AMZ-日、認可、X-API -key、X-AMZ-セキュリティ・トークン、X-XSRF-TOKEN、アクセス制御 - 許可 - ヘッダ

3）アクセス制御 - 許可-方法： 'POST、OPTIONS'、GET