0

Laravel(5.7.0)でAPIを開発し、Angular(CLI 7.3.7)でクライアントサイドのアプリケーションを開発しました。

ドメイン
Angular: example.com
Laravel: api.example.com
とサブドメイン型にしています。

サーバーはxserverです。

AngularアプリはLaravel製のAPIを叩いてデータを取得するのですが、コンソールに

Access to XMLHttpRequest at 'https://api.example.com/api/articles/'
from origin 'https://example.com' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
Redirect is not allowed for a preflight request.

と表示されてしまいます。

Laravel側の問題なのか、Angular側の問題なのか、htaccessなどの問題なのかわからず完全に行き詰まっている状態です。

PostmanやChromeで直接APIを叩くと正しいJSONレスポンスが帰ってきます。

参考になりそうな情報などをお持ちでしたらご教授お願いいたします。

1 件の回答 1

1

エラーメッセージから判断するに、クライアントがAPIを叩く際にpreflightリクエストが発生し、サーバーがそれを正しくハンドリングできていないことが原因であると思われます。preflightリクエストが何かについてはこのあたり記事をご覧ください。

Laravel側でこのpreflightリクエストに対応する実装をする必要があります。「Laravel CORS preflight」などで検索すると参考になる情報が見つかるようです。

3
  • 'Content-Type' => 'application/json', 'Access-Control-Allow-Origin' => 'https://example.com', 'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, Origin, Accept', 'Access-Control-Allow-Credentials' => trueこのように設定していますが同様のエラーが発生します。エラーコードは301です。
    – Niek
    Commented 2019年5月17日 2:55
  • レスポンスコードが301ということは、そこまで到達する前に何らかのミドルウェア(もしかしたらHTTPサーバ)が処理を返していることが考えられます。これ以上は具体的なコードや設定ファイルの中身などを見ないと何とも言えませんが、ログを見たりpreflightと同様のリクエストを発してみてレスポンスがどうなっているのか確かめることで原因解明につながると思います。 Commented 2019年5月17日 4:11
  • 1
    ログを辿ったりしましたが一向に改善しないのでapi.example.comというサブドメイン型をやめ、example.com/api/にLaravelアプリを配置してCORSポリシー違反を回避することで一応解決としました。ありがとうございます。
    – Niek
    Commented 2019年5月18日 17:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。