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

2016年8月17日

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

t f B! P L
久々にハマってしまった・・・ 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で行わないといけないんですね。 試してみます。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ