

vueコンポーネントでPOST送信した際に、404エラーが出て上手く動作しません。  
ルーティングの設定などはちゃんと出来ていると思っているのですが、何が原因なのでしょうか？どなたか分かるかたご教授いただきたいです。

[![画像の説明をここに入力](https://i.stack.imgur.com/lxxyk.png)](https://i.stack.imgur.com/lxxyk.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/LFxfu.png)](https://i.stack.imgur.com/LFxfu.png)

**追記**  
axiosでpostをしている際の送信先URLをデベロッパーツールで確認していたところ、ホスト名の後のURLが重複していて、それでルーティングのURLと一致せずエラーが出ているものだと考えました。  
しかし、ルーティングのURLもaxiosでpostする際のURLも間違っておらず、なぜこのような挙動になってしまうのか色々ググっていますが原因がわかりません。  
わかる方いらっしゃいましたらどうかご教授おねがい致します。  
なお、Auth関連のpost機能ではそのようなエラーは発生せず正常に動作しています。  
先日まで普通に動いていたと思うのですが、macOSのアップデートをしてから動かなくなった気がしなくもないです。アップデートしたことによってこのようなことになるのもありえるんでしょうか

**web.php**

[code]

    Auth::routes();
    
    Route::get('/', 'AidhiasController@top')->name('aidhias.top');
    
    Route::group(['middleware' => 'auth'], function() {
        Route::get('aidhias', 'AidhiasController@index')->name('aidhias.index');
        Route::get('mypage', 'AidhiasController@mypage')->name('mypage');
        Route::get('mypage/profile', 'AidhiasController@showProf')->name('mypage.prof');
        Route::get('mypage/profile/edit', 'AidhiasController@showProfEditForm')->name('profedit');
        Route::post('mypage/profile/update', 'AidhiasController@profUpdate');
        Route::get('aidhias/create', 'AidhiasController@aidhiasCreate')->name('aidhias.create');
        Route::post('aidhias/create', 'AidhiasController@aidhiasNew');
        Route::get('my/aidhias', 'AidhiasController@myAidhias')->name('my.aidhias');
        Route::get('aidhias/{id}', 'AidhiasController@show')->name('aidhias.show');
        Route::get('aidhias/{id}/edit', 'AidhiasController@aidhiaEdit')->name('aidhia.edit');
        Route::post('aidhias/{id}/update', 'AidhiasController@aidhiaUpdate');
    });
    
[/code]

**AidhiasController.php**

[code]

    // アイディア編集画面表示
        public function aidhiaEdit($id)
        {
            $aidhia = Aidhia::with(['user', 'category', 'reviews' => function($query){
                $query->with('user');
            }])->find($id);
    
            $categories = Category::all();
    
            return view('aidhias.aidhiaEdit', [
                'aidhia' => $aidhia,
                'categories' => $categories,
            ]);
        }
    
        // アイディア編集機能
        public function aidhiaUpdate(Request $request)
        {
    
            $request->validate([
                'pic' => 'image',
                'title' => 'required|string|max:40',
                'overview' => 'required|string|max:255',
                'category_id' => 'required|int',
                'contents' => 'required|string|max:3000',
                'price' => 'required|int',
            ]);
    
            $file_name = $request->file->getClientOriginalName();
            $request->file->storeAs('public/images', $file_name);
    
            $aidhia = new Aidhia();
            $aidhia->pic = '/storage/images/'.$file_name;
            $aidhia->title = $request->title;
            $aidhia->overview = $request->overview;
            $aidhia->category_id = $request->category_id;
            $aidhia->contents = $request->contents;
            $aidhia->price = $request->price;
            $aidhia->user_id = Auth::id();
            $aidhia->save();
    
            return 'my/aidhias';
        }
    
[/code]

**AidhiaEdit.vue**

[code]

    <template>
        <div>
            <form class="l-form p-form" enctype="multipart/form-data">
                <div class="l-form__body p-form__body">
                    <div class="form-group">
                        <label for="file" class="l-form__label p-form__label">画像
                            <div class="l-form__input-wrap p-form__input-wrap">
                                <img v-if="prevewImg || aidhia.pic" :src="prevewImg || aidhia.pic"  alt="" class="l-form__input-img p-form__input-img"/>
                                <input id="file" class="l-form__input-file p-form__input-file" type="file" name="pic" @change="fileSelected" placeholder="ドラッグ＆ドロップまたはクリックしてファイルをアップロード">
    
                                <div v-if="!prevewImg & !aidhia.pic" class="p-form__input-over">
                                    <i class="fas fa-camera-retro icon-camera"></i>
                                    <p class="l-form__info p-form__info">ドラッグ＆ドロップ</p>
                                    <p class="l-form__info p-form__info">またはクリックしてファイルをアップロード</p>
                                </div>
                                <div class="area-msg">
                                    {{ errors.pic }}
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
    
                <div class="l-form__body p-form__body">
                    <div class="form-group">
                        <label for="title" class="l-form__label p-form__label">アイディア名</label>
                        <span class="label-require">必須</span>
                        <input id="title" class="l-form__input p-form__input" :class="{ hasErr: errors.title }" type="text" name="title" :value="title" @input="title = $event.target.value" placeholder="40文字まで">
                    </div>
                    <div class="area-msg">
                        {{ errors.title }}
                    </div>
                    <div class="form-group">
                        <label for="overview" class="l-form__label p-form__label">概要</label>
                        <span class="label-require">必須</span>
                        <textarea rows="7" id="overview" class="l-form__textarea p-form__textarea" :class="{ hasErr: errors.overview }" name="overview"
                                  :value="overview" @input="overview = $event.target.value" placeholder="アイディアの簡易的な説明。（一覧表示された時に表示する文言）">
                        </textarea>
                    </div>
                    <div class="area-msg">
                        {{ errors.overview }}
                    </div>
                    <p class="l-form__counter p-form__counter"><template>{{ overview.length }}</template> / 255</p>
                </div>
    
                <div class="l-form__body p-form__body">
                    <div class="form-group">
                        <label for="category" class="l-form__label p-form__label">カテゴリー</label>
                        <span class="label-require">必須</span>
                        <div class="l-form__select p-form__select">
                            <select name="category_id" v-model="category_id" id="category" class="l-form__select-box p-form__select-box">
                                <option value="0">選択してください</option>
                                <option v-for="category in categories" :value="aidhia.category_id" @input="category.id = $event.target.value">
                                    {{ category.name }}
                                </option>
                            </select>
                            <i class="fas fa-angle-down icon-angle-down"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="contents" class="l-form__label p-form__label">アイディアの内容</label>
                        <span class="label-require">必須</span>
                        <textarea rows="7" id="contents" class="l-form__textarea p-form__textarea" :class="{ hasErr: errors.contents }" name="contents"
                                  :value="contents" @input="contents = $event.target.value" placeholder="3000文字以内">
                        </textarea>
                        <div class="area-msg">
                            {{ errors.contents }}
                        </div>
                        <p class="l-form__counter p-form__counter"><template>{{ contents.length }}</template> / 3000</p>
                    </div>
                </div>
    
                <div class="l-form__body p-form__body">
                    <div class="form-group form-group__price">
                        <div>
                            <label for="price" class="l-form__label p-form__label">販売価格</label>
                            <span class="label-require__price">必須</span>
                        </div>
                        <div>
                            <span class="l-form__input-price-head">¥</span><input id="price" class="l-form__input-price p-form__input-price" :class="{ hasErr: errors.price }" type="number" name="price" :value="price" @input="price = $event.target.value" placeholder="0">
                        </div>
                    </div>
                    <div class="area-msg">
                        {{ errors.price }}
                    </div>
                    <p class="l-form__info p-form__info">価格（¥300〜9,999,999）</p>
    
                </div>
    
                <div class="l-btn-conteiner">
                    <button type="button" class="p-btn btn-primary" @click="aidhiaUpdate">編集する</button>
                </div>
                <div style="text-align: center;">
                    <a href="#" class="l-form__link p-form__link">もどる</a>
                </div>
            </form>
        </div>
    </template>
    
    <script>
    export default {
        props: {
            aidhia: Object,
            categories: Array,
        },
        data: function() {
            return {
                fileInfo: '',
                title: this.aidhia.title,
                overview: this.aidhia.overview,
                category_id: this.aidhia.category_id,
                contents: this.aidhia.contents,
                price: this.aidhia.price,
                errors: '',
                prevewImg: '',
            }
        },
        methods: {
            fileSelected(event) {
                console.log(event.target.files[0]);
                this.fileInfo = event.target.files[0];
                this.createImage(this.fileInfo);
            },
            confirmImage(e) {
                this.file = e.target.files[0];
            },
            createImage(file) {
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = event => {
                    this.prevewImg = event.target.result;
                };
            },
            aidhiaUpdate() {
    
                if(!confirm('編集を完了しますか？')) {
                    return;
                }
                    this.errors = {};
    
                    var self = this;
                    var url = 'aidhias/' + this.aidhia.id + '/update';
    
    
                    var formData = new FormData()
                    formData.append('file', this.fileInfo);
                    formData.append('title', this.title);
                    formData.append('overview', this.overview);
                    formData.append('category_id', this.category_id);
                    formData.append('contents', this.contents);
                    formData.append('price', this.price);
    
                    axios.post(url, formData)
                        .then(function (response) {
                            self.fileInfo = '';
                            self.title = '';
                            self.overview = '';
                            self.category_id = '';
                            self.contents = '';
                            self.price = '';
                            location.href = response.data;
                        })
                        .catch(function (error) {
    
                            if(error.response) {
                                console.log(error.response.data);
                            }
                            var responseErrors = error.response.data.errors;
                            var errors = {};
                            console.log(errors);
    
                            for(var key in responseErrors) {
    
                                errors[key] = responseErrors[key][0];
    
                            }
    
                            self.errors = errors;
                        });
    
            },
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
    </script>
    
[/code]


CC BY-SA 4.0
2020-09-20T05:02:51.313
70551
2023-07-19T12:06:50.787
2021-04-04T00:54:06.733
32986
40824
question
laravel vue.js laravel-5 axios
POST送信で404 Not Found


追記のおかげでやっと問題点がわかりましたが，

[code]

                    var url = 'aidhias/' + this.aidhia.id + '/update';
    
[/code]

となっていますがこれだと相対パスの`aidhia/119/update`にアクセスしようとします．`aidhias/119/`からアクセスすると`aidhias/119/aidhia/119/update`になるのは当然です．(`<a>`リンクと同様です)  
おそらく，この場合は

[code]

                    var url = '/aidhias/' + this.aidhia.id + '/update';
    
[/code]

のように`/`を先頭に付けておくだけで充分じゃないでしょうか．


CC BY-SA 4.0
2020-09-20T13:00:06.670
70564
2020-09-20T13:00:06.670
2376
70551
answer