URL正規化によって Redirect is not allowed for a preflight request でCORSエラーが起きた

こんにちはjunです。LaravelとNuxt SPAでアプリを作っていたのですがCORS設定をしているのに偶に以下のようなエラーが発生していました。

Access to XMLHttpRequest at 'http://localhost/api/v1/test/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

エラー内容の通り原因はpreflightリクエストがリダイレクトされてしまっていることが原因です。開発者ツールでnetworkを見ると確かにpreflightリクエストが301となっていることが原因です。しかしなぜリダイレクト？Laravelでredirectを返すメソッドがあるのかと思いましたが、原因は.htaccessの以下の記述でした。

#Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

上記はLaravelが使用するURLの正規化を行う.htaccessの記述です。URLの末尾にスラッシュがある場合、ないように正規化してくれます。http://localhost/test/→http://localhost/test のようにリダイレクトがおきます。これはAPIルートでも発生します。

私のAPIリクエストを見てみると

async test(){
    this.$axios.post('/v1/test/')
    .then(res=>[
        console.log(res)
    ])
    .catch(err=>{
        console.log(err)
    })
}

URLをみてみると/v1/test/と末尾にスケジュール があります。そしてXHRは POST + contetnt-type:application/json のようなリクエストではpreflightリクエストが飛びますが、そのリクエストはリダイレクトをしてはいけません。そのためURLを/v1/testと末尾をなくしてあげたらリダイレクトが起きず、問題なくCORSが起きなくなりました。

CORSの設定やLaravelのメソッドを調べていましたが、結構簡単な.htaccessが原因でした。