リクエストヘッダーフィールドAccess-Control-Allow-HeadersはAccess-Control-Allow-Headersでは許可されていません

230
user3194367 2014-09-09 05:03.

POSTリクエストを使用してサーバーにファイルを送信しようとしていますが、送信するとエラーが発生します。

リクエストヘッダーフィールドContent-Typeは、Access-Control-Allow-Headersでは許可されていません。

だから私はエラーをグーグルで検索し、ヘッダーを追加しました:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

次に、エラーが発生します。

リクエストヘッダーフィールドAccess-Control-Allow-OriginはAccess-Control-Allow-Headersでは許可されていません

それで私はそれをグーグルで検索しました、そして私が見つけることができた唯一の同様の質問は半分の答えを提供され、そしてトピックから外れて閉じられました。どのヘッダーを追加/削除する必要がありますか?

15 answers

191
Shai 2014-09-09 05:08.

サーバは、(POSTリクエストが送信されていること)を含む必要があるAccess-Control-Allow-Headersヘッダ(など)、その応答。クライアントからのリクエストにそれらを入れても効果はありません。

これは、クロスオリジンリクエストを受け入れる(およびContent-Typeリクエストヘッダーを許可するなど)ことを指定するのはサーバー次第であるためです。クライアントは、特定のサーバーがCORSを許可するかどうかを自分で決定できません。

249
Fisherman 2015-05-31 20:01.

私も同じ問題を抱えていました。私が見つけたjQueryのドキュメントで:

クロスドメインリクエストについては、以外にコンテンツタイプを設定するapplication/x-www-form-urlencodedmultipart/form-dataまたはtext/plainサーバにプリフライトOPTIONS要求を送信するために、ブラウザをトリガします。

そのため、サーバーはクロスオリジンリクエストを許可しますがAccess-Control-Allow-Headers、許可しませんが、エラーをスローします。デフォルトではapplication/json、Angularコンテンツタイプは、OPTIONリクエストを送信しようとしているです。角度のあるデフォルトヘッダーを上書きするかAccess-Control-Allow-Headers、サーバー側で許可してみてください。これが角度のあるサンプルです:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});
52
lekant 2015-11-25 17:05.

それが誰かを助けるなら(これは開発目的のためだけにこれを許可しなければならないのでこれがちょっと貧弱であっても)私が同じ問題に遭遇したのでここにJavaソリューションがあります。[編集]ワイルドカード*は悪い解決策なので使用しlocalhostないでください。本当にローカルで何かを動作させる必要がある場合に使用してください。

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}
16
l3x 2015-02-24 05:29.

サーバー(POSTリクエストの送信先)は、応答にContent-Typeヘッダーを含める必要があります。

以下に、1つのカスタム「X_ACCESS_TOKEN」ヘッダーを含む、含める一般的なヘッダーのリストを示します。

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

これは、リクエストの送信先のWebサーバー用にhttpサーバーの担当者が構成する必要があるものです。

サーバー担当者に「Content-Length」ヘッダーを公開するように依頼することもできます。

彼はこれをクロスオリジンリソースシェアリング(CORS)リクエストとして認識し、これらのサーバー構成を行うことの意味を理解する必要があります。

詳細については、以下を参照してください。

15
Vinod Dhakad 2018-07-13 04:21.

これを使用して、PHPで適切なヘッダーをアクティブ化できます。

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");
8
Fernando Gabrieli 2016-04-17 06:29.

以下はnodejsで私のために働きます:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});
4
Quentin 2014-09-09 05:05.

設定しようとしているヘッダーは応答ヘッダーです。それらは、応答で、要求を行っているサーバーによって提供される必要があります。

クライアントに設定されている場所はありません。データを所有しているサイトではなく、アクセス許可が必要なサイトからアクセス許可を付与できるのであれば、アクセス許可を付与する手段があるのは無意味です。

3
realappie 2016-10-24 04:08.

Expressサーバーでこの問題が発生した場合は、次のミドルウェアを追加してください

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
3
albaiti 2016-11-09 03:17.

PCまたはMacのChromeでionic2またはangularjs2のJavaScriptリクエストをテストする場合は、クロスオリジンを許可するためにChromeブラウザ用のCORSプラグインをインストールしてください。

mayba getリクエストはそれを必要とせずに機能しますが、post、puts、deleteを実行するには、テスト用のcorsプラグインをインストールして問題なく実行する必要があります。その定義はクールではありませんが、CORSプラグインなしでどのように実行するかはわかりません。

また、json応答がjsonステータスによって400を返さないことを確認してください

3
Sedat Y 2016-12-18 13:41.

これはバックエンドの問題です。バックエンドでsailsapiを使用する場合は、cors.jsを変更し、ここにファイルを追加します

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};
3
Gabriel P. 2019-10-04 07:30.

Aspネットコア、すぐにそれが開発のために働いて得るために、でStartup.csConfigure method追加

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
3
jerryurenaa 2020-03-15 14:29.

localhost問題を解決するためにPHPを使用していて、PHPをこれに設定している場合:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

フロントエンドでの使用から:

{headers: {"Content-Type": "application/json"}}

そしてブームはこれ以上の問題からlocalhost

2
russellhoff 2016-08-10 22:33.

私の場合、Webサービスメソッドに@HeaderParamとしていくつかのパラメーターを受け取ります。

これらのパラメーターは、CORSフィルターで次のように宣言する必要があります。

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}
2
Tony Stark 2018-04-13 09:44.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-HeadersエラーはAccess-Control-Allow-Origin、HTTPヘッダーのフィールドが応答によって処理または許可されていないことを意味します。Access-Control-Allow-Originリクエストヘッダーからフィールドを削除します。

1
Koby Douek 2020-10-05 07:33.

私の場合、サーバーのweb.configファイルに次を追加しました。

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://other.domain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Total War:Warhammer:Kotakuレビュー

Total War:Warhammer:Kotakuレビュー

私はこのゲームを嫌う準備ができていました。先週の前に、Total War:Warhammerについての私の考えがありました:それでもここに私は、私の手にある完成品であり、私は変わった男です。

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

スタンディングロックスー族のメンバーと水の保護者は、ノースダコタ州のスタンディングロックにあるオセティサコウィンキャンプを去ります。(Twitter経由のCNNスクリーンショット)火と煙がスカイラインを覆い、スタンディングロックスー族のメンバーと水の保護者が、聖なるものを守りながら建てた家、オセティサコウィン(セブンカウンシルファイアーズ)キャンプから行進し、太鼓を打ち、歌い、祈りました。ダコタアクセスパイプラインとしても知られる「ブラックスネーク」からの土地。

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

写真:APシアーズとKマートは、イヴァンカ・トランプのトランプホームアイテムのコレクションも、誰も購入したくないために削除しました。シアーズとKマートの両方の親会社であるシアーズホールディングスは、土曜日のABCニュースへの声明で、彼らが気にかけていると辛抱強く説明しましたトランプラインを売り続けるにはお金を稼ぐことについてあまりにも多く。

ポテトチップスでたった10分でスペインのトルティーヤを作る

ポテトチップスでたった10分でスペインのトルティーヤを作る

伝統的なスペインのトルティーヤは通常、オリーブオイルで柔らかくなるまで調理されたポテトから始まります(30分以上かかる場合があります)が、ケトルで調理されたポテトチップスの助けを借りてわずか10分でテーブルに置くことができます。上のビデオはすべてがバラバラにならないように裏返す方法を含め、レシピ全体を説明しますが、必要なのは4〜5個の卵と3カップのケトルチップスだけです。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language