ajaxの送信でエラーになる

Question

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.

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

$.ajax({
                    cache: false
                    async: true
                    ,xhr : function()
                    {
                        XHR = $.ajaxSettings.xhr();
                        if(XHR.upload)
                        {
                            XHR.upload.addEventListener('progress',function(e){
                                var percent = parseInt(e.loaded / e.total * 10000) /100;
                                console.log(e.loaded,e.total);
                                console.log(percent);
                                $('#progressBar').css("width",percent + "%");
                            }, false);
                        }
                        return XHR;
                    }
                    ,url: url + vkey
                    ,type: 'post'
                    ,data : fd
                    ,processData: false
                    ,contentType: false

                }).done(function(data, textStatus, jqXHR){
                    alert("secsses");
                    

                }).fail(function(jqXHR, textStatus, errorThrown){
                    alert("failllllllllll");
                });

##追記

$.ajax({
url: url + vkey
                    ,type: 'post'
                    ,data : fd
                    ,processData: false
                    ,contentType: false

                }).done(function(data, textStatus, jqXHR){
                    alert("secsses");
                    

                }).fail(function(jqXHR, textStatus, errorThrown){
                    alert("failllllllllll");
                });

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

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

$.ajax({
//                    cache: false
                    async: true
                    ,xhr : function()
                    {
                        XHR = $.ajaxSettings.xhr();
                        if(XHR.upload)
                        {
                            XHR.upload.addEventListener('progress',function(e){
                                var percent = parseInt(e.loaded / e.total * 10000) /100;
                                console.log(e.loaded,e.total);
                                console.log(percent);
                                $('#progressBar').css("width",percent + "%");
                            }, false);
                        }
                        return XHR;
                    }
                    ,url: url + vkey
                    ,xhrFields: {
                        withCredentials: true
                    }
                    ,type: 'post'
                    ,data : fd
                    ,processData: false
                    ,contentType: false

                }).done(function(data, textStatus, jqXHR){
                    alert("secsses");
                    

                }).fail(function(jqXHR, textStatus, errorThrown){
                    alert("failllllllllll");
                });

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

Comments

[spookybird]

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

Answer 1

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

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

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

Answer 2

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