share facebook facebook twitter menu hatena pocket slack

2018.08.22 WED

lumenのAPIをクロスサイトで実行できるようにする

宇敷 久里也

WRITTEN BY 宇敷 久里也

問題

lumen(5.5)で作ったAPIをajaxなどでクロスドメインで実行しようとしても実行されない。

原因

ブラウザからpostやgetでAPIを実行するとまず、optionsでリクエストを投げます。そこでAPIがちゃんとアクセスできるかを確認してます。この機能のことをプリフライトリクエストと呼ぶらしいです。
そのレスポンスで200が返ってきたら、実際に実行したいpostやgetのAPIが実行されます。
ただレスポンスで200以外が返ってきた場合は、postやgetのAPIが実行されない。

laravelの機能で、optionsのリクエストを受けるとrouterに達する前に、405で返してしまいます。

解決策

以下のファイルを\app\Http\Middlewareに作成する。

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        if($request->isMethod('OPTIONS')) {
            return response('', 200);
        }
    }
}

\bootstrap\app.phpに以下を追加する。

$app->middleware([
    App\Http\Middleware\CorsMiddleware::class
 ]);

(【Lumen】Lumen製APIに対してクロスドメインアクセスを行う(CORS)の引用)

これを追加うすることでrequestがrouterに届くよりも前に、requestに対してCorsMiddlewareで処理をすることができる。なのでCorsMiddlewareでリクエストのメソッドがOPTIONSだった場合は200を返す処理を追加しています。

元記事はこちら

lumenのAPIをクロスサイトで実行できるようにする

宇敷 久里也

宇敷 久里也

WEBプログラマです。WEBに関することは、なんでも興味あります。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。