アクセス制御リクエストヘッダーは、jQueryを使用してAJAXリクエストのヘッダーに追加されます

412
fingerup 2012-04-11 06:56.

jQueryからのAJAXPOSTリクエストにカスタムヘッダーを追加したいと思います。

私はこれを試しました:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});

このリクエストを送信してFireBugで見ると、次のヘッダーが表示されます。

オプションxxxx / yyyy HTTP / 1.1
ホスト:127.0.0.1:6666
ユーザーエージェント:Mozilla / 5.0(Windows NT 6.1; WOW64; rv:11.0)Gecko / 20100101 Firefox / 11.0
受け入れ:text / html、application / xhtml + xml、 application / xml; q = 0.9、/ ; q = 0.8
Accept-Language:fr、fr-fr; q = 0.8、en-us; q = 0.5、en; q = 0.3
Accept-Encoding:gzip、deflate
接続:keep -alive
オリジン:null
Access-Control-Request-Method:POST
Access-Control-Request-Headers:my-first-header、my-second-header
Pragma:no-cache
Cache-Control:no-cache

なぜ私のカスタムヘッダーはAccess-Control-Request-Headers:に行くのですか?

Access-Control-Request-Headers:my-first-header、my-second-header

私は次のようなヘッダー値を期待していました:

My-First-Header:最初の値
My-Second-Header:2番目の値

出来ますか?

6 answers

138
karlgold 2012-09-10 17:44.

Firefoxで見たのは、実際のリクエストではありませんでした。HTTPメソッドはPOSTではなくOPTIONSであることに注意してください。クロスドメインAJAXリクエストを許可するかどうかをブラウザが判断するのは、実際には「プリフライト」リクエストでした。

http://www.w3.org/TR/cors/

飛行前リクエストのAccess-Control-Request-Headersヘッダーには、実際のリクエストのヘッダーのリストが含まれています。サーバーは、ブラウザーが実際の要求を送信する前に、これらのヘッダーがこのコンテキストでサポートされているかどうかを報告することが期待されます。

445
milkovsky 2012-11-23 05:02.

jQueryAjax呼び出しでリクエストヘッダーを設定する方法の例を次に示します。

$.ajax({ type: "POST", beforeSend: function(request) { request.setRequestHeader("Authority", authorizationToken); }, url: "entities", data: "json=" + escape(JSON.stringify(createRequestObject)), processData: false, success: function(msg) { $("#results").append("The result =" + StringifyPretty(msg));
  }
});
184
G-raph 2014-11-15 02:45.

以下のこのコードは私のために働きます。私は常に一重引用符のみを使用し、それは問題なく機能します。一重引用符または二重引用符のみを使用することをお勧めしますが、混同しないでください。

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });
14
Kamil Kiełczewski 2019-04-09 18:03.

カスタムヘッダーを送信するため、CORSリクエストは単純なリクエストではないため、ブラウザは最初にプリフライトOPTIONSリクエストを送信して、サーバーがリクエストを許可していることを確認します。

サーバーでCORSをオンにすると、コードが機能します。代わりにJavaScriptフェッチを使用することもできます(ここ)

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

nginx(nginx.confファイル)でCORSをオンにする構成例を次に示します。

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always; add_header 'Access-Control-Allow-Credentials' 'true' always; if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

ApacheCORSをオンにする設定例(.htaccessファイル)を次に示します。

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

3
the accountant 2016-05-04 00:31.

そのため、JavaScriptを使用してボットを作成することはできません。これは、オプションがブラウザーで許可されているものに制限されているためです。ほとんどのブラウザが従うCORSポリシーに準拠するブラウザを注文して、他のオリジンにランダムなリクエストを送信し、その応答を簡単に取得できるようにすることはできません。

さらに、origin-headerブラウザに付属の開発者ツールなど、一部のリクエストヘッダーを手動で編集しようとすると、ブラウザは編集を拒否し、プリフライトOPTIONSリクエストを送信する場合があります。

0
Sándor Krisztián 2020-11-26 00:16.

クライアント側からは、この問題を解決することはできません。nodejs Express側からは、corsモジュールを使用して処理できます。

var express       = require('express');
var app           = express();
var bodyParser = require('body-parser');
var cors = require('cors');

var port = 3000; 
var ip = '127.0.0.1';

app.use('*/myapi', 
          cors(), // with this row OPTIONS has handled
          bodyParser.text({type:'text/*'}),
          function( req, res, next ){
    console.log( '\n.----------------' + req.method + '------------------------' );
        console.log( '| prot:'+req.protocol );
        console.log( '| host:'+req.get('host') );
        console.log( '| url:'+req.originalUrl );
        console.log( '| body:',req.body );
        //console.log( '| req:',req );
    console.log( '.----------------' + req.method + '------------------------' );
    next();
    });

app.listen(port, ip, function() {
    console.log('Listening to port:  ' + port );
});
 
console.log(('dir:'+__dirname ));
console.log('The server is up and running at http://'+ip+':'+port+'/');

cors()がない場合、このオプションはPOSTの前に表示されます。

.----------------OPTIONS------------------------
| prot:http
| host:localhost:3000
| url:/myapi
| body: {}
.----------------OPTIONS------------------------

.----------------POST------------------------
| prot:http
| host:localhost:3000
| url:/myapi
| body: <SOAP-ENV:Envelope .. P-ENV:Envelope>
.----------------POST------------------------

ajax呼び出し:

$.ajax({
    type: 'POST',
    contentType: "text/xml; charset=utf-8",
// these does not works
    //beforeSend: function(request) { 
    //  request.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');
    //  request.setRequestHeader('Accept', 'application/vnd.realtime247.sct-giro-v1+cms');
    //  request.setRequestHeader('Access-Control-Allow-Origin', '*');
    //  request.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET');
    //  request.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type');
    //},
    //headers: {
    //  'Content-Type': 'text/xml; charset=utf-8',
    //  'Accept': 'application/vnd.realtime247.sct-giro-v1+cms',
    //  'Access-Control-Allow-Origin': '*',
    //  'Access-Control-Allow-Methods': 'POST, GET',
    //  'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type'
    //},
    url: 'http://localhost:3000/myapi',             
    data:       '<SOAP-ENV:Envelope .. P-ENV:Envelope>',                
    success: function( data ) {
      console.log(data.documentElement.innerHTML);
    },
    error: function(jqXHR, textStatus, err) {
      console.log( jqXHR,'\n', textStatus,'\n', err )
    }
  });

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

メイミー・ジョンソン、ニグロリーグでピッチングした女性、82歳で死去

メイミー・ジョンソン、ニグロリーグでピッチングした女性、82歳で死去

写真提供者:Khue Bui / AP Mamie Johnsonは、ニグロリーグでプレーする3人の女性の1人で、82歳で亡くなりました。ジョンソンは子供の頃から野球を始め、最初に全米女子プロ野球に挑戦しました。 17歳のリーグだが、黒人だったのでフィールドへの出場は許されなかった。

グローアップゴール:カルメンデラヴァラードは時代を超えた魅力の縮図です

グローアップゴール:カルメンデラヴァラードは時代を超えた魅力の縮図です

ジャックミッチェル/ゲッティイメージズ日曜日の夜、ダンサー、振付師、女優のカルメンデラヴァラードが第40回ケネディセンター名誉賞を受賞しました。今年は、ドナルドトランプ首長のクレチンが祝福されていないことで、この式典がさらに注目を集めました。まだ見事な86歳のとき、伝説的なパフォーマーであるde Lavalladeは失望せず、真の優雅さと美しさが時代を超えていることを示しました。

ファイナルファンタジーXVのマルチプレイヤーは少量でとても楽しいです

ファイナルファンタジーXVのマルチプレイヤーは少量でとても楽しいです

くそー、私はちょうどこのシャツを買いました。一部の人にとっては、ファイナルファンタジーXVのマルチプレイヤー拡張パックは、スクウェア・エニックスの壮大なRPGを友達と体験するための面白い(少しイライラする場合でも)方法です。

ナズは面会権をめぐってケリスを法廷に連れて行く

ナズは面会権をめぐってケリスを法廷に連れて行く

ナズとケリス(ローレンス・ルシエ/ゲッティイメージズ)ナズは息子とより多くの時間を過ごしたいと考えており、現在、元妻のケリスを正式な面会スケジュールのために法廷に連れて行っています。ブラストが入手した文書によると、ナズは彼がは「長年にわたってケリスと協力して働いてきた」が、ケリスは「彼女が自分にとって都合がよいと判断した場合にのみ、息子との監護権を行使することを許可している。

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

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

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

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

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

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