質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

8700閲覧

ajaxの送信でエラーになる

aizawal-hiroki

総合スコア56

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2018/09/12 06:47

編集2022/01/12 10:55

jqueryでajaxの送信の際通信状況を見ようと思い下記のようにコードを書いたのですが

jquery-1.8.3.js:8434 OPTIONS url 404 (Not Found)
Failed to load url: Response for preflight does not have HTTP ok status.

というエラーが返ってきます。どうしたらよろしいでしょうか

jquery

1$.ajax({ 2 cache: false 3 async: true 4 ,xhr : function() 5 { 6 XHR = $.ajaxSettings.xhr(); 7 if(XHR.upload) 8 { 9 XHR.upload.addEventListener('progress',function(e){ 10 var percent = parseInt(e.loaded / e.total * 10000) /100; 11 console.log(e.loaded,e.total); 12 console.log(percent); 13 $('#progressBar').css("width",percent + "%"); 14 }, false); 15 } 16 return XHR; 17 } 18 ,url: url + vkey 19 ,type: 'post' 20 ,data : fd 21 ,processData: false 22 ,contentType: false 23 24 }).done(function(data, textStatus, jqXHR){ 25 alert("secsses"); 26 27 28 }).fail(function(jqXHR, textStatus, errorThrown){ 29 alert("failllllllllll"); 30 });

##追記

jquery

1$.ajax({ 2url: url + vkey 3 ,type: 'post' 4 ,data : fd 5 ,processData: false 6 ,contentType: false 7 8 }).done(function(data, textStatus, jqXHR){ 9 alert("secsses"); 10 11 12 }).fail(function(jqXHR, textStatus, errorThrown){ 13 alert("failllllllllll"); 14 });

これだとうまく行きました。ただ送ってるだけですけど

##追記2
ご指摘の通りCORSを使用したリクエストなのでクライアント側とサーバー側を編集いたしました。
クライアント側ではwithCredentialsオプションをtrueにして送信する。
サーバ側はヘッダーにAccess-Control-Allow-Originを正しくセットするのとAccess-Control-Allow-Credentialsをtrueにする。

jquery

1$.ajax({ 2// cache: false 3 async: true 4 ,xhr : function() 5 { 6 XHR = $.ajaxSettings.xhr(); 7 if(XHR.upload) 8 { 9 XHR.upload.addEventListener('progress',function(e){ 10 var percent = parseInt(e.loaded / e.total * 10000) /100; 11 console.log(e.loaded,e.total); 12 console.log(percent); 13 $('#progressBar').css("width",percent + "%"); 14 }, false); 15 } 16 return XHR; 17 } 18 ,url: url + vkey 19 ,xhrFields: { 20 withCredentials: true 21 } 22 ,type: 'post' 23 ,data : fd 24 ,processData: false 25 ,contentType: false 26 27 }).done(function(data, textStatus, jqXHR){ 28 alert("secsses"); 29 30 31 }).fail(function(jqXHR, textStatus, errorThrown){ 32 alert("failllllllllll"); 33 });

しかしそれでもエラー内容は変わらずエラーになってしまいます

x_x👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spookybird

2018/09/12 13:07

サーバ側の実装見せてもらわないとわかりません。
guest

回答2

0

プリフライトリクエストが飛んでます。
プリフライトが飛ぶ条件はこちらです。

または、リクエストに使用される XMLHttpRequestUpload オブジェクトに1つ以上のイベントリスナーが登録されている場合。

この条件に合致してるっぽいので、POSTで送信しようとしているリクエストの前に、OPTIONSというリクエストが飛びます。
サーバ側にこのOPTIONSで待ち受けている口がないので、404 Not Foundってことになってますね。

投稿2018/09/12 07:30

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

通信状況をみたいならブラウザの開発ツールで確認する方がよくないですか?
要求ヘッダや応答ヘッダも確認できます

投稿2018/09/13 02:29

yambejp

総合スコア114503

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問