Q&A
iOS: https://qiita.com/yuxx/items/a1b79bff45fba239f2f1
Android: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=ja
でエラーが出ていないかチェックする必要があるかもしれません。
前提・実現したいこと
PHP(Laravel)とVue.js、MySQLで作ったシンプルなタスクリスト（タスクを取得、追加、編集、削除するアプリ）をHerokuで公開したいです。
現状だとGETメソッドは実行されてリストの取得は出来ているのですが、固定の環境以外ではPOSTメソッドが実行されていない状態なので解消したいです。
また、Laravelでの開発を始めて2日ほどなので、Laravel側の問題であった場合はデバッグ方法に関しても情報共有いただければ嬉しいです。
デバッグ力が不足しておりエラーコードの情報が少なく申し訳ないですが、何卒よろしくお願いいたします。
発生している問題・エラーメッセージ
Herokuでの公開（デプロイ）は出来て、GETメソッドは機能しています。
そのため、初期表示でMySQL内のデータは取得でき、正しくリストが表示されています。
ですが、特定の環境でタスクの追加や編集、削除などのPOSTメソッドを使った処理ができません。
・実装作業していたPCでは、POSTメソッドが実行される。
・実装作業していたPCが接続していたwi-fiを使うと、スマホからでもPOSTメソッドが実行される。
・スマホから実装作業していたPCが接続していたwi-fiを使わずに、そのほかのwi-fiやsoftbank回線を使っていると、POSTメソッドが実行されない。
▼HerokuでのPOSTメソッドが正常に実行された時のログ
2019-09-04T05:04:08.339350+00:00 heroku[router]: sock=client at=warning code=H27 desc="Client Request Interrupted" method=POST path="/task/delete/252" host=laravel-vue-tasklist.herokuapp.com request_id=8c8f29ec-1551-4a67-873b-8416025bab71 fwd="126.199.64.51" dyno=web.1 connect=1ms service=72ms status=499 bytes= protocol=https 2019-09-04T05:04:08.373085+00:00 heroku[router]: at=info method=GET path="/" host=laravel-vue-tasklist.herokuapp.com request_id=a218bb3a-55e9-4b2a-9b47-5ecf8c64c393 fwd="126.199.64.51" dyno=web.1 connect=1ms service=67ms status=200 bytes=1733 protocol=https 2019-09-04T05:04:08.340619+00:00 app[web.1]: 10.9.158.174 - - [04/Sep/2019:05:04:08 +0000] "POST /task/delete/252 HTTP/1.1" 302 408 "https://laravel-vue-tasklist.herokuapp.com/?" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15 2019-09-04T05:04:08.374718+00:00 app[web.1]: 10.91.165.96 - - [04/Sep/2019:05:04:08 +0000] "GET / HTTP/1.1" 200 847 "https://laravel-vue-tasklist.herokuapp.com/?" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15 2019-09-04T05:04:08.757294+00:00 app[web.1]: 10.91.165.96 - - [04/Sep/2019:05:04:08 +0000] "GET /task/get HTTP/1.1" 200 104 "https://laravel-vue-tasklist.herokuapp.com/?" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15 2019-09-04T05:04:08.755391+00:00 heroku[router]: at=info method=GET path="/task/get" host=laravel-vue-tasklist.herokuapp.com request_id=1cdd7e3c-4c28-4f6c-9e07-03eb69c7bd5b fwd="126.199.64.51" dyno=web.1 connect=1ms service=34ms status=200 bytes=981 protocol=https
▼HerokuでのPOSTメソッドが実行されない時のログ
2019-09-04T05:02:58.336423+00:00 heroku[router]: at=info method=GET path="/" host=laravel-vue-tasklist.herokuapp.com request_id=f1f19f10-782e-46c5-838c-db9196421bfa fwd="126.199.64.51" dyno=web.1 connect=1ms service=32ms status=200 bytes=1733 protocol=https 2019-09-04T05:02:58.341175+00:00 app[web.1]: 10.9.193.103 - - [04/Sep/2019:05:02:58 +0000] "GET / HTTP/1.1" 200 847 "https://laravel-vue-tasklist.herokuapp.com/?" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/9.15.0 2019-09-04T05:02:58.662353+00:00 heroku[router]: at=info method=GET path="/task/get" host=laravel-vue-tasklist.herokuapp.com request_id=545ea343-9d30-4dea-9f76-5a5b8ec54f7c fwd="126.199.64.51" dyno=web.1 connect=1ms service=24ms status=200 bytes=1196 protocol=https 2019-09-04T05:02:58.667152+00:00 app[web.1]: 10.9.193.103 - - [04/Sep/2019:05:02:58 +0000] "GET /task/get HTTP/1.1" 200 322 "https://laravel-vue-tasklist.herokuapp.com/?" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/9.15.0
該当のソースコード
▼resources/js/components/TaskList.vue
vuejs
1<template> 2 <div class="container"> 3 <div class="col-sm-offset-2 col-sm-8"> 4 <div class="panel panel-default"> 5 <div class="panel-heading"> 6 New Task 7 </div> 8 <div class="panel-body"> 9 <form class="form-horizontal"> 10 <div class="form-group"> 11 <label for="task-name" class="col-sm-3 control-label">Task Name</label> 12 <div class="col-sm-6"> 13 <input type="text" name="name" id="task-name" class="form-control" v-model="newTaskName" placeholder="タスクを入力"> 14 </div> 15 <div class="col-sm-3"> 16 <button type="submit" class="btn btn-default" v-on:click="addTask"> 17 <i class="fa fa-btn fa-plus"></i> Add Task 18 </button> 19 </div> 20 </div> 21 </form> 22 </div> 23 </div> 24 <div class="panel panel-default" v-if="tasks.length > 0"> 25 <div class="panel-heading"> 26 Current Tasks 27 </div> 28 <div> 29 <table class="table table-striped"> 30 <tbody> 31 <tr v-for="(task, index) in tasks" :key="index"> 32 <div class="col-sm-9"> 33 <form> 34 <input class="form-control" type="hidden" name="id"> 35 <td class="col-sm-10"> 36 <div class="form-group"> 37 <label for="task-name" class="col-sm-2 control-label">No.{{task.id}}</label> 38 <div class="col-sm-10"> 39 <input type="text" name="name" id="task-name" class="form-control" v-model="task.name"> 40 </div> 41 </div> 42 </td> 43 <td class="col-sm-2"> 44 <button type="submit" class="btn btn-success" v-on:click="editTask(task)"> 45 Edit 46 </button> 47 </td> 48 </form> 49 </div> 50 <div class="col-sm-3"> 51 <form> 52 <td> 53 <button type="submit" class="btn btn-danger" v-on:click="deleteTask(task)"> 54 Delete 55 </button> 56 </td> 57 </form> 58 </div> 59 </tr> 60 </tbody> 61 </table> 62 </div> 63 </div> 64 </div> 65 </div> 66</template> 67 68<script> 69 export default { 70 data(){ 71 return { 72 newTaskName:'', 73 tasks: [] 74 } 75 }, 76 mounted() { 77 axios.get('/task/get').then(response => this.tasks = response.data) 78 }, 79 methods: { 80 addTask: function () { 81 var article = { 82 'name': this.newTaskName 83 }; 84 axios.post('/task/add', article) 85 }, 86 editTask: function (task) { 87 axios.post('/task/edit/' + task.id, task) 88 89 }, 90 deleteTask: function (task) { 91 axios.post('/task/delete/' + task.id, task) 92 } 93 } 94 } 95</script> 96
▼routes/web.php
laravel
1<?php 2 3use Illuminate\Http\Request; 4 5Route::get('/', function () { 6 $tasks = \App\Task::orderBy('created_at', 'asc')->get(); 7 return view('tasks', [ 8 'tasks' => $tasks 9 ]); 10}); 11 12Route::get('/task/get',function(){ 13 $tasks = \App\Task::orderBy('created_at', 'asc')->get(); 14 return $tasks; 15}); 16 17Route::post('/task/add', function (Request $request) { 18 $task = new \App\Task; 19 $task->name = request('name'); 20 $task->save(); 21 return redirect('/'); 22}); 23 24Route::post('/task/edit/{task}', function (Request $request) { 25 $task = \App\Task::find($request->id); 26 $task->name = $request->name; 27 $task->save(); 28 return redirect('/'); 29}); 30 31Route::post('/task/delete/{task}', function (\App\Task $task) { 32 $task->delete(); 33 return redirect('/'); 34}); 35 36Route::get('/task/add', function (Request $request) { 37 $task = new \App\Task; 38 $task->name = request('name'); 39 $task->save(); 40 return redirect('/'); 41}); 42 43Route::get('/task/edit/{task}', function (Request $request) { 44 $task = \App\Task::find($request->id); 45 $task->name = $request->name; 46 $task->save(); 47 return redirect('/'); 48}); 49 50Route::get('/task/delete/{task}', function (\App\Task $task) { 51 $task->delete(); 52 return redirect('/'); 53}); 54
試したこと
原因として以下2点を疑いました。
・データベースへのアクセスが上手に出来てない
→データベースの情報をheroku側でしか設定していなかったので、アプリ側の.envファイルに「heroku config」で取得できるcleardbの情報に編集しましたが、変化はありませんでした。
・POSTメソッドがリダイレクトによってGETメソッドに変わってる
→web.phpにてpostメソッドのみだったルーティングをgetメソッドに書き換えたものも作成しましたが、変化がありませんでした。
一度formタグにmethod="POST"を指定した時に「The POST method is not supported for this route. Supported methods: GET, HEAD.」というエラーが出たので試してみました。
あとは、IPアドレスが指定のものじゃないとPOSTメソッドが出来ないようになっているのかと思いましたが、特に固定IPを指定したりした記憶がないので、十分確認できていません。
ご提示いただいた方法で、下記エラーを確認しました。
Unhandled Promise Rejection: Error: Network Error
回答1件
0
POSTログが出力されていないのが気になりました。
Vue (フロント側) でコンソールエラーが出ていると思いますので、そちらも記載いただけると原因特定が進むと思います。
また、「実装作業していたPCが接続していたwi-fiを使うと」ですが、
使う場合と使わない場合の差分として、DNSの問題が考えられるかなと思いました。
PCで接続していたwi-fiを使用した場合と、使用していない場合で、
nslookup laravel-vue-tasklist.herokuapp.com
の結果に差分が出るか調査してみてください。
投稿2019/09/04 05:47
総合スコア327
再度確認してみたところ、下記環境では正常に実行されました。
・iPhoneのwi-fiを切りsoftbank回線にする
→テザリングでmacと接続して該当ページにアクセス
→タスクの追加、編集、削除を行う
現在確認できる範囲では、iPhoneからのアクセスが出来ないという状況になっており、確認できる情報がherokuのログのみとなっております。（PCが同じ状況でネット回線を変えても動作が変わらなくなってしまったので、nslookupでの差分は取れませんでした。）
また、Vueのコンソールエラーですが、何も表示されていない状態です。
進捗ありましたら、再度ご報告いたします。
修正依頼の方でご提示いただきました方法で、下記のコンソールエラーを取得しました。
Unhandled Promise Rejection: Error: Network Error
iPhoneだったらPCのSafariからデバッグコンソールだせますよ
返事が遅くなりました。ご確認ありがとうございます。
「Unhandled Promise Rejection: Error: Network Error」とのことですので、通信系のエラーだと思います。
axios.post()にエラーハンドリングを追加して、より詳細なログを出力してみてください。
```
axios.post(...).then(...).catch(err => console.error(err))
```
あなたの回答
tips
プレビュー
