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

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

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

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

Q&A

解決済

1回答

8677閲覧

cakephp3系でajax通信をしたいけど403エラーで失敗する、、

oroshitaruuuuu

総合スコア25

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

0グッド

0クリップ

投稿2018/11/16 10:51

編集2018/11/16 15:06

やりたいこと

javascriptからajaxでデータを指定したコントローラのアクションに送信し、そこで取得した値を返して処理したい
※コントローラは階層構造になっていて、Controller/Sample/Sample1/indexって感じになっている

環境

cakephp 3.6
jquery 3.1.1
MAMP 5.0.1

できないこと

以下ソースでjavascriptからajaxでコントローラにデータを渡してそれをそのままjavascriptに返しているのですが、403エラーになってしまう

知りたいこと

・コントローラの指定はうまくできているか
(生成されるパスは正しいパスでした)
・ajax通信のコードは合っているか
・cakephpでajaxを使うときは何か設定がいるのか

エラー

ajax通信に失敗しました
review.js:181 XMLHttpRequest : 403
review.js:182 textStatus : error
review.js:183 errorThrown : undefined

ソースコード

Controller/Sample/Sample1.php

1 2<?php 3namespace App\Controller\Sample; 4 5use App\Controller\AppController; 6use Cake\ORM\TableRegistry; 7use Cake\Core\Exception\Exception; 8use Cake\Error\ExceptionRenderer; 9 10/** 11 * Sample1 Controller 12 */ 13class Sample1Controller extends AppController 14{ 15 /** 16 * Initialize method 17 */ 18 public function initialize() 19 { 20 parent::initialize(); 21 $this->viewBuilder()->setLayout('Sample/sample1'); 22 $this->loadComponent('RequestHandler'); 23 } 24 25 /** 26 * Index method 27 */ 28 public function index() 29 { 30 31 //省略 32 33 $this->set(compact('data1')); 34 } 35 36 /** 37 * Loading method 38 * @return $test テストデータ 39 */ 40 public function loading() 41 { 42 $this->autoRender = false; 43 if ($this->request->is('ajax')) { 44 // 送られてきたリクエストデータを取得する 45 $test = $this->request->getData('test'); 46 47 // 必要な処理を実装していく 48 49 // 戻り値を返却する 50 51 echo json_encode($test); 52 } 53 } 54} 55

webroot/js/sample1.js

1 2$("button").on("click",function(){ 3 var test = "test"; 4 execAjax(test); 5}); 6 7function execAjax(test){ 8 $.ajax({ 9 type: "POST", 10 url: "/App/Sample/Sample1/loading", 11 data: { 12 "test" : test, 13 }, 14 }) 15 // Ajaxリクエストが成功した時発動 16 .done(function(response){ 17 alert("成功"); 18 alert(response); 19 }) 20 // Ajaxリクエストが失敗した時発動 21 .fail(function(XMLHttpRequest, textStatus, errorThrown){ 22 alert("失敗"); 23 console.log("ajax通信に失敗しました"); 24 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 25 console.log("textStatus : " + textStatus); 26 console.log("errorThrown : " + errorThrown.message); 27 }); 28}

追記

  • cakephpのインストールと設定

参考サイト
https://qiita.com/YoshikiNakamura/items/bcceaaa3d064a08233c1
https://www.ritolab.com/entry/59

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

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

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

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

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

m.ts10806

2018/11/16 13:39

JavaScriptはどこに書かれているのでしょうか。テンプレート(またはビュー)に書かれているのでしたらCakePHP側で持っているWebRoot系のパスの定数やパス生成の機能を使われたほうが確実かと思います
oroshitaruuuuu

2018/11/16 14:28

JavaScriptはwebroot/jsの下にあります。
guest

回答1

0

ベストアンサー

CakePHP3からControllerの階層化が面倒になったんですね・・・
CakePHP3.6.5で試しましたので引っかかった部分だけ記載していきます

※bin/cake server -H 0.0.0.0 -p 5673
で試してます

routers.php

php

1// ファイルの最後に追加(ルーティング定義しないとだめになったらしい) 2Router::prefix('Sample', function ($routes) { 3 $routes->fallbacks(DashedRoute::class); 4});

Application.php

php

1 ->add(new RoutingMiddleware($this, '_cake_routes_')); 2 3 // CSRFとりあえず面倒なのでコメント&↑部分文法合うよう;を入れる 4 // Add csrf middleware. 5 // ->add(new CsrfProtectionMiddleware([ 6 // 'httpOnly' => true 7 // ]));

Ajaxページ(テストとして用意したページ)
※jquery.jsはLayoutで読み込ませるようにしてます

ctp

1<button id="button">ボタン</button> 2<script> 3$("#button").on("click",function(){ 4 var test = "test"; 5 execAjax(test); 6}); 7 8function execAjax(test){ 9 $.ajax({ 10 type: "POST", 11 url: "/sample/sample1/loading", // URLはこうなった 12 data: { 13 "test" : test, 14 }, 15 }) 16 // Ajaxリクエストが成功した時発動 17 .done(function(response){ 18 alert("成功"); 19 alert(response); 20 }) 21 // Ajaxリクエストが失敗した時発動 22 .fail(function(XMLHttpRequest, textStatus, errorThrown){ 23 alert("失敗"); 24 console.log("ajax通信に失敗しました"); 25 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 26 console.log("textStatus : " + textStatus); 27 console.log("errorThrown : " + errorThrown.message); 28 }); 29} 30</script>

Sample1Controller.php(bin/cake bake controller Sample1 --prefix Sampleで作ってloadingだけに削ぎ落とした)

PHP

1<?php 2namespace App\Controller\Sample; 3 4use App\Controller\AppController; 5 6/** 7 * Sample1 Controller 8 * 9 * 10 * @method \App\Model\Entity\Sample1[]|\Cake\Datasource\ResultSetInterface paginate($object = null, array $settings = []) 11 */ 12class Sample1Controller extends AppController 13{ 14 /** 15 * Initialize method 16 */ 17 public function initialize() 18 { 19 parent::initialize(); 20 $this->loadComponent('RequestHandler'); 21 } 22 23 /** 24 * Loading method 25 * @return $test テストデータ 26 */ 27 public function loading() 28 { 29 $this->autoRender = false; 30 if ($this->request->is('ajax')) { 31 // 送られてきたリクエストデータを取得する 32 $test = $this->request->getData('test'); 33 34 // 必要な処理を実装していく 35 36 // 戻り値を返却する 37 38 echo json_encode($test); 39 } 40 } 41}

これで動作確認できました。

投稿2018/11/16 11:01

編集2018/11/16 16:18
rururu3

総合スコア5545

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

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

oroshitaruuuuu

2018/11/16 11:07

申し訳ございません。 フォルダ名やアクション名を変更していたのですが、指摘して頂いた点は私の修正ミスです。 ご指摘ありがとうございます。
oroshitaruuuuu

2018/11/16 12:43

返信遅くなりました。 下記サイトを参考にインストール作業を行いました。 https://qiita.com/YoshikiNakamura/items/bcceaaa3d064a08233c1 今更の補足で申し訳ないですが、環境はMAMPを使っています。 なので、アプリフォルダはhtdocs下にあり、そこをドキュメントルートに設定しています。
oroshitaruuuuu

2018/11/16 16:49

ご丁寧にありがとうございます。 application.phpとはどのファイルの事でしょうか。config/app.phpの事でしょうか。 また初歩的な質問で申し訳無いのですが、ajaxを使う際にapacheサーバのconfig等を書き換える必要はあるのでしょうか。
oroshitaruuuuu

2018/11/16 17:29

すいません、確認不足でした。 src/Application.phpの事ですね! ここのcsrfをコメントアウトしたところ、上手く動作しました! お忙しい中、ご協力ありがとうございました!
oroshitaruuuuu

2018/11/16 17:34

>POST/PUT送信時、セッション内にリクエストデータのキーに該当するトークンが存在するかチェック。 チェック終了とともにセッションから該当トークンを削除。(ワンタイムトークン設定=trueの場合) で、Ajaxで普通にPOST送信するとトークンキーを送ってないので上記チェックではじかれてしまう。 下記サイトで、コメントアウトする理由がわかりました。 https://www.i-enter.co.jp/blog/blog/2015/06/04/cakephp%E3%81%A7security%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88ajax%E3%81%A7post%E9%80%81%E4%BF%A1/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問