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

Question

やりたいこと

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

ソースコード

<?php
namespace App\Controller\Sample;

use App\Controller\AppController;
use Cake\ORM\TableRegistry;
use Cake\Core\Exception\Exception;
use Cake\Error\ExceptionRenderer;

/**
 * Sample1 Controller
 */
class Sample1Controller extends AppController
{
    /**
      * Initialize method
      */
    public function initialize()
    {
      parent::initialize();
      $this->viewBuilder()->setLayout('Sample/sample1');
      $this->loadComponent('RequestHandler');
    }

    /**
     * Index method
     */
    public function index()
    {

        //省略

        $this->set(compact('data1'));
    }

    /**
      * Loading method
      * @return $test テストデータ
      */
    public function loading()
    {
        $this->autoRender = false;
        if ($this->request->is('ajax')) {
            // 送られてきたリクエストデータを取得する
            $test = $this->request->getData('test');

            // 必要な処理を実装していく

            // 戻り値を返却する

            echo json_encode($test);
        }
    }
}

$("button").on("click",function(){
    var test = "test";
    execAjax(test);
});

function execAjax(test){
    $.ajax({
        type: "POST",
        url: "/App/Sample/Sample1/loading",
        data: {
            "test" : test,
        },
    })
    // Ajaxリクエストが成功した時発動
    .done(function(response){
        alert("成功");
        alert(response);
    })
    // Ajaxリクエストが失敗した時発動
    .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert("失敗");
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    });
}

追記

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

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

Comments

[m.ts10806]

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

[oroshitaruuuuu]

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

Answer 1

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

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

routers.php

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

Application.php

            ->add(new RoutingMiddleware($this, '_cake_routes_'));

            // CSRFとりあえず面倒なのでコメント＆↑部分文法合うよう;を入れる
            // Add csrf middleware.
            // ->add(new CsrfProtectionMiddleware([
            //     'httpOnly' => true
            // ]));

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

<button id="button">ボタン</button>
<script>
$("#button").on("click",function(){
    var test = "test";
    execAjax(test);
});

function execAjax(test){
    $.ajax({
        type: "POST",
        url: "/sample/sample1/loading",  // URLはこうなった
        data: {
            "test" : test,
        },
    })
    // Ajaxリクエストが成功した時発動
    .done(function(response){
        alert("成功");
        alert(response);
    })
    // Ajaxリクエストが失敗した時発動
    .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert("失敗");
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    });
}
</script>

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

<?php
namespace App\Controller\Sample;

use App\Controller\AppController;

/**
 * Sample1 Controller
 *
 *
 * @method \App\Model\Entity\Sample1[]|\Cake\Datasource\ResultSetInterface paginate($object = null, array $settings = [])
 */
class Sample1Controller extends AppController
{
    /**
      * Initialize method
      */
    public function initialize()
    {
        parent::initialize();
        $this->loadComponent('RequestHandler');
    }

    /**
      * Loading method
      * @return $test テストデータ
      */
    public function loading()
    {
        $this->autoRender = false;
        if ($this->request->is('ajax')) {
            // 送られてきたリクエストデータを取得する
            $test = $this->request->getData('test');

            // 必要な処理を実装していく

            // 戻り値を返却する

            echo json_encode($test);
        }
    }
}

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

Comments

[oroshitaruuuuu]

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

[rururu3]

https://book.cakephp.org/3.0/ja/installation.html
あとインストールで開発サーバーでアクセスできるのまでは確認されてますか？

[oroshitaruuuuu]

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

[oroshitaruuuuu]

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

[oroshitaruuuuu]

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

[oroshitaruuuuu]

>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/