[Javascript] AJAX処理でサーバーがstatus405エラーを返す時の対処方法

2016年8月17日

Javascript テクノロジー プログラミング

久々にハマってしまった・・・ jQueryにまかせておけばさほどはまらなかったかもしれないが、JSでAJAX処理を個別メソッドで行なっている場合に、下記の条件でエラーになってしまって、2時間ほど費やしたので、メモしておきます。

ハマりポイント

以前の記事の自作AJAXライブラリを使っていて問題発生 [Javascript] Ajaxライブラリ サーバーのPHPファイルにアクセスして返り値をJSONでもらって対応していたところを、JSファイルに直接アクセスして、返り値のTEXTデータをevalすると、onload処理を行わなくてもライブラリの読み込み確認ができると思い、通常通り以下の様な記述で行なった所、エラー発生!! $$.ajax.set({ "url" :"http://hoge.com/common.js", "method":"post", "async" :"true", "onSuccess":function(res){ eval(res); } }); これを実行した際に、以下のようなエラー発生。 load.js?k=fe01ce2…:183 POST http://192.168.33.12/job/capy/protech2/service/protech/js/common.js 405 (Not Allowed) 下のリンクページを見てみたところ、どうやら405エラーは、サーバー側のヘッダの問題のようだ・・・ status一覧表

解消方法

前回記事に、修正ポイントを書いていますが、改めて解説。 まず、ライブラリに「content-type」が「application/x-www-form-urlencoded」に固定されていたので「text/plane」または「text/javascript」を指定できるように以下ソース改修を行なった。

改修前

httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

改修後

if(typeof option.type != "undefined"){ httpoj.setRequestHeader('Content-Type', option.type); } else{ httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } 分岐処理を入れただけですね。 そして、optionにtypeのkeyを追加できるようにして、呼び出し時にしていすればいい事にしました。 もう一つ分かったことがあり、「application/x-www-form-urlencoded」はサーバーでPOSTを受け入れる事ができるcontentのようで、 methodを「get」にしなければいけないので、CGIアクセス以外は、特に固定ファイルなどの呼び出しは「GET」を指定するといいようです。

呼び出し方法

$$.ajax.set({ "url" :"http://hoge.com/common.js", "method":"get", "async" :"true", "type" :"text/plain", "onSuccess":function(res){ eval(res); } });

ライブラリソースコード

修正版のソースコードもアップしておきます。 $$.ajax = { createHttpRequest:function(){ //Win ie用 if(w.ActiveXObject){ //MSXML2以降用; try{return new ActiveXObject("Msxml2.XMLHTTP")} catch(e){ //旧MSXML用; try{return new ActiveXObject("Microsoft.XMLHTTP")} catch(e2){return null} } } //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用; else if(w.XMLHttpRequest){return new XMLHttpRequest()} else{return null} }, /** * XMLHttpRequestオブジェクト生成 */ set:function(option){ if(!option){return} var httpoj = new $$.ajax.createHttpRequest(); if(!httpoj){return;} //open メソッド; httpoj.open( option.method , option.url , option.async ); if(typeof option.type != "undefined"){ httpoj.setRequestHeader('Content-Type', option.type); } else{ httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } //受信時に起動するイベント; httpoj.onreadystatechange = function(){ //readyState値は4で受信完了; if (httpoj.readyState==4){ //コールバック option.onSuccess(httpoj.responseText); } }; //query整形 var data = []; if(typeof(option.query)!="undefined"){ for(var i in option.query){ data.push(i+"="+encodeURIComponent(option.query[i])); } } if(typeof(option.querys)!="undefined"){ for(var i=0;i<option.querys.length;i++){ data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1])); } } //send メソッド if(data.length){ httpoj.send( data.join("&") ); } else{ httpoj.send(); } }, //コールバック関数 ( 受信時に実行されます ); onSuccess:function(res){console.log(res)} }; 無事にアクセスすることができるようになりました。 メデタシメデタシ・・・
  • りょうちん
    2017/09/01 at 18:17
    ajax ド素人です。 私も ajax の post した際に 405 エラー ではまっています。 改修前後が記載されていますが、修正されたファイル名を教えいただけませんか。 よろしくお願い致します。
  • ユゲタ
    2017/09/02 at 21:36
    自作したajax関数の改修なので、ファイル名は、ajax関数の書かれているファイルになります。 今回は私の環境でload.jsというファイルを書き換えました。 あと、この記事を書いた後でわかったんですが、別ドメインでのajaxはmethodをPOSTでやるとエラーになるので、GETで行わなとイケないようです。
  • りょうちん
    2017/09/03 at 11:39
    回答ありがとうございました。 POSTはNGでGETで行わないといけないんですね。 試してみます。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。