メモ インフラネットワーク

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

    2021.09.19 2021.09.19

    こんにちは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が原因でした。

    Copyright © 2021 jun. All rights reserved.