ajaxを使ってPOSTした結果error 500になってしまう原因が分かりません。

Question

Herokuで公開した自作アプリでのPOSTした際にserver errror 500が返る原因と対策をご教授ください。
###問題点
Vueファイル内のformData APIをPOSTするとserver error 500が返ってきます。
Laravelを使用しています。

※lockalhost:8000ではエラーにならずに正常にPOSTできAWS S3に保存されます。
GETで取得・表示することもできています。

※問題はHerokuで公開したURLで同じようにPOSTをする時だけserver error 500となってしまうことです。
###コンソールエラー

app.js:14719 POST https://portfolio-vue-laravel.herokuapp.com/api/photos 500 (Internal Server Error)
dispatchXhrRequest @ app.js:14719
xhrAdapter @ app.js:14553
dispatchRequest @ app.js:15199
Promise.then (async)
request @ app.js:14976
Axios.<computed> @ app.js:15001
wrap @ app.js:15565
_callee$ @ app.js:17629
tryCatch @ app.js:19187
invoke @ app.js:19417
(anonymous) @ app.js:19242
asyncGeneratorStep @ app.js:17535
_next @ app.js:17537
(anonymous) @ app.js:17537
(anonymous) @ app.js:17537
submit @ app.js:17665
submit @ app.js:22527
invokeWithErrorHandling @ app.js:28295
invoker @ app.js:28620
original._wrapper @ app.js:33979

[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 500"

found in

---> <PhotoForm> at resources/js/pages/PhotoForm.vue
       <App> at resources/js/App.vue
         <Root>
warn @ app.js:27066
logError @ app.js:28325
globalHandleError @ app.js:28320
handleError @ app.js:28280
(anonymous) @ app.js:28297
Promise.catch (async)
invokeWithErrorHandling @ app.js:28297
invoker @ app.js:28620
original._wrapper @ app.js:33979

app.js:28329 Error: Request failed with status code 500
    at createError (app.js:15133)
    at settle (app.js:15394)
    at XMLHttpRequest.handleLoad (app.js:14602)
logError @ app.js:28329
globalHandleError @ app.js:28320
handleError @ app.js:28280
(anonymous) @ app.js:28297
Promise.catch (async)
invokeWithErrorHandling @ app.js:28297
invoker @ app.js:28620
original._wrapper @ app.js:33979

###該当コード

<template>
    <div class="postPhoto">
        <h3>投稿する写真を選んでください</h3>
        <form class="postPhoto_form" @submit.prevent="submit">

            <input type="file" class="postPhoto_form-item"
            @change="onFileChange"
            name="file">
            
            <output class="postPhoto_form-output" v-if="preview">
                <img :src="preview" alt="">
            </output>

            <div class="postPhoto_form-button">
                <button type="submit" class="button">送信</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            preview: null,
            photo: null,
        }
    },
    methods: {
        onFileChange(event) {
            const reader = new FileReader()
            reader.onload = e => {
                this.preview = e.target.result
            }
            reader.readAsDataURL(event.target.files[0])
            this.photo = event.target.files[0]
        },

        reset() {略},

        async submit() {
            const formData = new FormData()
            if (this.photo !== "") {
                formData.append('photo', this.photo)
            }
            const config = { headers: { "content-type": "multipart/form-data" } };
            const response = await axios.post('/api/photos', formData, config)

            if (response.status === UNPROCESSABLE_ENTITY) {
                this.errors = response.data.errors
                console.log(this.errors);
                return false
            }

            this.reset()

            if (response.status !== CREATED) {
                this.$store.commit('error/setCode', response.status)
                return false
            }

            this.$router.push(`/photoList`)
        },
    }
}
</script>

    /**
     * 写真投稿
     * @param StorePhoto $request
     * @return \Illuminate\Http\Response
     */
    public function create(StorePhoto $request)
    {
        // 投稿写真の拡張子を取得する
        $extension = $request->photo->extension();

        $photo = new Photo();

        // インスタンス生成時に割り振られたランダムなID値と
        // 本来の拡張子を組み合わせてファイル名とする
        $photo->filename = $photo->id . '.' . $extension;

        // S3にファイルを保存する
        // 第三引数の'public'はファイルを公開状態で保存するため
        Storage::cloud()
            ->putFileAs('', $request->photo, $photo->filename, 'public');

        // データベースエラー時にファイル削除を行うため
        // トランザクションを利用する
        DB::beginTransaction();

        try {
            Auth::user()->photos()->save($photo);
            DB::commit();
        } catch (\Exception $exception) {
            DB::rollBack();
            // DBとの不整合を避けるためアップロードしたファイルを削除
            Storage::cloud()->delete($photo->filename);
            throw $exception;
        }

        // リソースの新規作成なので
        // レスポンスコードは201(CREATED)を返却する
        return response($photo, 201);
    }

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePhoto extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'photo' => 'required|file|mimes:jpg,jpeg,png,gif'
        ];
    }
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Storage;

class Photo extends Model
{
    /** プライマリキーの型 */
    protected $keyType = 'string';

    /** JSONに含める属性 */
    protected $visible = [
        'id', 'owner', 'url', 'created_at'
    ];

    /** JSONに含める属性 */
    protected $appends = [
        'url',
    ];

    /** IDの桁数 */
    const ID_LENGTH = 12;

    public function __construct(array $attributes = [])
    {
        parent::__construct($attributes);

        if (! Arr::get($this->attributes, 'id')) {
            $this->setId();
        }
    }

    /**
     * ランダムなID値をid属性に代入する
     */
    private function setId()
    {
        $this->attributes['id'] = $this->getRandomId();
    }

    /**
     * ランダムなID値を生成する
     * @return string
     */
    private function getRandomId()
    {
        $characters = array_merge(
            range(0, 9), range('a', 'z'),
            range('A', 'Z'), ['-', '_']
        );

        $length = count($characters);

        $id = "";

        for ($i = 0; $i < self::ID_LENGTH; $i++) {
            $id .= $characters[random_int(0, $length - 1)];
        }

        return $id;
    }

    /**
     * アクセサ - url
     * @return string
     */
    public function getUrlAttribute()
    {
        return Storage::cloud()->url($this->attributes['filename']);
    }

    /**
     * リレーションシップ - usersテーブル
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function owner()
    {
        return $this->belongsTo('App\User', 'user_id', 'id', 'users');
    }
}

ローカルホストではAWS S3に保存できているのでenvファイルの設定は正しいかと思います。

コンソールエラーからリクエストに問題があるように見えるのですがどこがどう間違っているのかが分かりませんでした。
色々調べた結果formData APIはmacOSやSafariで上手く送信できないととかも拝見したのですが結局よく分かりませんでした。
そもそもローカルホストでは正常に動いているのでHeroku公開でのサイトではAWS S3へ接続がうまくできていないのでしょうか。
どなたかご教授のほどを宜しくお願いします。

###環境

• vue:2.6.12
• PHP:7.4.13
• Laravel:2.3.0
• MySQL:8.0.22 for osx10.13 on x86_64 (Homebrew)
• macOS High Sierra 10.13.6

参考にしたサイト

https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/
こちらの記事を参考に作成しています。

Comments

[yambejp]

axiosではなく普通にsubmitすればちゃんと戻ってくるのでしょうか？

[m.ts10806]

ログは確認されましたか？
500エラーは多岐に渡るのでコードだけ確認すればいいとは限りません

[nakaji-junk]

yambejpさん
m.ts10806さん
コメントありがとうございます。
時間の都合上明日確認してみます。

[Lulucom]

> envファイルの設定は正しいかと思います。

ローカルでは.envファイルで環境変数を設定しますが、Herokuでは.envファイルは参照されませんのでheroku config:set ... のコマンドで環境変数を設定する必要があります。

[nakaji-junk]

Lulucomさん
コメントありがとうございます。
明日確認してみます。

[nakaji-junk]

Lulucomさん
heroku config:setでの環境変数を設定することで無事にPOSTができました！
コメント頂いた皆さんありがとうございました。

Answer 1

JSのエラーから原因が分かることはないので見ても無駄。
本番環境ではLaravelから外に詳細なエラーメッセージが出ることはない。
500=何も情報がないのと同じ。

Laravel側のエラーログを見ないと解決しない。
herokuではstorage/logsには保存されないのでstderr使うように設定が必要。
https://devcenter.heroku.com/ja/articles/php-logging

Comments

[nakaji-junk]

ご回答ありがとうございました。
コメント頂いた中から解決に至りました。
本番環境でのエラーログの確認の仕方を勉強させて頂きました。