リクエストヘッダーフィールド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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

グッドジョブ、ESPN

グッドジョブ、ESPN

今日のホワイトハウスの記者会見で、報道官のサラ・ハッカビー・サンダースは、スポーツセンターのホストであるイェメル・ヒルのドナルド・トランプに関する最近のツイートについてコメントするよう求められ、大統領と彼の政策を白人至上主義者として説明した。ヒルは彼女のつぶやきのためにESPNによって公に叱責されました。

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

基本的に頭のあらゆる部分から髪の毛を整えたり、ブロードライしたり、まっすぐにしたり、脱毛したりする必要がある場合は、このレミントンゴールドボックスが最適です。今日だけ、Amazonは、すでに人気のあるShortcut Pro Self-HaircutKitやPearlPro Ceramic Flat Ironのように、グルーミングをはるかに簡単にするヘアツールをマークダウンしています。

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

トゥパックシャクール(ティムモーゼンフェルダー/ゲッティイメージズ); マヤアンジェロウ(マーティンゴッドウィン/ゲッティイメージズ)移動、テイラースウィフト。ケンドールとカイリーは、必要な数の座席を持っています。

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

写真:Tesla Motorsフロリダに住んでいて、Tesla Model S、Model X 60、またはModel 60Dを使用している場合、車の自律性は50 km(約30マイル)高くなります。これは失敗ではなく、ハリケーンイルマによる避難作業を容易にするために会社自身が命じた自治権の一時的な延長です。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language