web-dev-qa-db-ja.com

Angular2：X-XSRF-TOKENはAccess-Control-Allow-Headersでは許可されていません

クロスサイトAPI呼び出しを実装しているため、本日この問題に取り組んでいます。最悪なのは、私のローカル環境でうまく機能することですが、herokuで一度実行すると、次のエラーで失敗します。

XMLHttpRequestが読み込めません https://restcountries.eu/rest/v1/all 。リクエストヘッダーフィールドX-XSRF-TOKENは、プリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません。

呼び出しをトリガーする関数は次のとおりです。

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

  return observable;

何か案が ？

ありがとう。

herokuangularxmlhttprequestcors
12
kfa

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

41
zahar_g

私の場合、「x-xsrf-token」値を「Access-Control-Allow-Headers」ヘッダーに追加する必要がありました。

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

参照 AngularJS：POST Data to External REST API

9
LeonardoX

私はクッキーをクリアしました、これは問題を解決しました。

0
Vasyl Petrov

これは、Java（ヘッダーを公開してから許可ヘッダーに含める）で役立ちました。これにより、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");
0
arn-arn