Vue.jsというかJavascript共通の問題ですが、
fetch()を使ってリダイレクトにfollowさせる際の注意点の備忘録です。
axiosでの挙動は確認していません。
そもそも、Javascriptの仕様であり、「問題点」ではありません。
レスポンス内容を気にしなければ、
CRUD処理でGETメソッドでリダイレクトさせるのは、
POSTメソッドのリクエスト処理後だけで良いと思います。
![](https://res.cloudinary.com/zenn/image/upload/s--MWoG7ADI--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E8%25A6%259A%25E3%2581%2588%25E3%2581%25A6%25E3%2581%258A%25E3%2581%258D%25E3%2581%259F%25E3%2581%2584HTTP%25E3%2583%25A1%25E3%2582%25BD%25E3%2583%2583%25E3%2583%2589%252F%25E3%2582%25B9%25E3%2583%2586%25E3%2583%25BC%25E3%2582%25BF%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:erntorii%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUVkRlRwNi1BX0o4M3M4QTFyVV9TUy01bXg3OTcwYnZHMU9sOFhqLVpSbmI9czk2LWM=%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png)
覚えておきたいHTTPメソッド/ステータスコード
POST後にリダイレクトさせる目的は、
多重送信によって新規レコードの多重作成を防止することにあります。
DETETE→削除されているので多重送信でもよくね?
PATCH→多重更新かけても最終結果は変わらなくね?
PUTも更新ならPATCHと同じじゃね?
とは言っても、その多重送信自体を極力避けたい場合や、
DELETEやPUT、PATCHのレスポンスの内容を受け取って処理をしたい場合、
GETメソッドでリダイレクトさせるケースはあっても良いと思います。
return [ 'destroyed' => $post->delete() ];
のように、削除したレコード件数を結果として返し、
クライアント側で受け取りたいケースが考えられます。
fetch(
url,
{
method: 'DELETE',
redirect: follow,
// other options...
}
)
のような処理でAPIへアクセスして、
API側からリダイレクトのレスポンスが返ってきた際に、
fetch() はDELETEメソッドのままでリダイレクト先にアクセスします。
これは、PUT、PATCHについても同様です。
API側でGETメソッドのみのルーティングが行われていると
エラーとなってしまいます。
API側でリダイレクト時のレスポンスコードを303にすることで解決します。
Laravelの場合、
▼コントローラー
public function destroy(int $id)
{
// ...
return redirect(route('api.posts.destroyed'), 303)
->with('destroyed', $post->delete());
}
public function destroyed()
{
return [ 'destroyed' => session()->pull('destroyed') ];
}
▼route/api.php
Route::prefix('/posts')->name('posts.')->group(function () {
// ...
Route::delete('/destroy/{id}', [PostsController::class, 'destroy'])->whereNumber('id')->name('destroy');
Route::get('/destroyed', [PostsController::class, 'destroyed'])->name('destroyed');
// ...
})->middleware('auth:sanctum');
のような感じでしょうか。
コメント