特定のルートのみReact(JavaScript)からLumen(PHP)へAjaxをした際にCORSで弾かれる。

Question

概要

現在下記の様な構成のアプリケーションを開発しています。

フロントエンドにReact.js、バックエンドにAPIサーバーのLumen、その間にリバースプロキシとしてNginxを置いています。
そこで、ReactからPromiseベースのAjaxライブラリであるaxiosを使ったところCORSで弾かれました。
Lumen側でCORSの設定をし、一応は回避することはできたのですが、特定のページにいくとまたCORSで弾かれます。
画面の遷移にはreact-routerを使用しています。個人的にはwebpack、もしくはnginxの設定が間違っていると考えています。
自分なりに色々調べてみましたが、解決せず…。
どなたか解決方法のご教授お願いいたします。

エラーの内容

Access to XMLHttpRequest at 'http://localhost:8000/api/sticky' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のコード

// nginx

server {
    listen       0.0.0.0:80;
    server_name  localhost;
    charset      utf-8;

    location / {
        root	/var/www/client/dist;
        index	index.html index.htm;
		try_files $uri $uri/ /index.html;

        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin: $http_origin');
          add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
          add_header 'Access-Control-Allow-Credentials: true');
          add_header 'Vary: Origin');
        }

        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    }

    # Media: images, icons, video, audio, HTC
    location ~* .(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
    }

    # ReverseProxy: Lumen API server
    location ^~ /api {
        proxy_pass http://127.0.0.1:8000;

        location ~ .php$ {
            fastcgi_pass  server:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include       fastcgi_params;
        }

        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin: $http_origin');
          add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
          add_header 'Access-Control-Allow-Credentials: true');
          add_header 'Vary: Origin');
        }

        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    }
}

// Lumen

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // TODO:Access-Control-Allow-Originを適切に指定する必要がある
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
        ];

        // preflightリクエスト用
        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

// webpack.config.js

import path from 'path'

const src = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

module.exports = {
    mode: "development",
    entry: ['@babel/polyfill', src + '/index.js'],
    output: {
        path: dist,
        filename: "main.js"
    },
    module: {
        rules: [
            {
                // css
                test: /.css$/,
                exclude: {
                    include: /node_modules/,
                    // quill.js
                    exclude: /node_modules/react-quill//
                },
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        },
                    },
                ],
            },
            {
                // js
                test: /.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', { modules: false }]]
                        }
                    }
                ]
            },
            {
                // tsx
                test: /.tsx?$/,
                use: "ts-loader",
            },
            {
                // image
                test: /.(jpg|JPG|jpeg|png|PING|gif|mp3|svg|ttf|woff2|woff|eot)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "assets/img",
                        publicPath: path => "/assets/img/" + path
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3000,
        inline: true,
        historyApiFallback: true
    }
};

バージョン

Lumen 6.3.3

Comments

[hoshi-takanori]

関係あるか分かりませんが、nginx の設定ファイルで、
add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
という行が 2 箇所ありますが、Access-Control-Allow-Method では？

[退会済みユーザー]

ご回答ありがとうございます！
確かに！ただ、修正いたしましたが、ダメでしたね…。

[hoshi-takanori]

認証に Cookie を使ってるなら、Access-Control-Allow-Origin: * では駄目なようです。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

[退会済みユーザー]

今回は認証にCookieを使用していないですが、一応、変更してみたところダメでした…。
個人的にはLumenは問題ないように思います。（直感ですが…。）
webpack、もしくはnginxの設定だと思うんです…。

[hoshi-takanori]

webpack は何の関係もないでしょう。CORS で弾かれる特定のページにどうやってアクセスして、実際にどんなレスポンスが返ってくるかを確認してみるのがいいと思います。

[退会済みユーザー]

なるほど…。
設定ファイルにaccess_log /var/log/nginx/access.log main;を追加し、catコマンドでlogファイルを表示しようとしましたが、何も出力されませんでした。これは通常の挙動なのでしょうか？個人的にはブラウザを更新した瞬間にアクセスログがaccess.logファイルに出力されるイメージなのですが…。

[退会済みユーザー]

そもそも一部の画像の表示もされていない（404）ですし、表示されている画像は、200 OK (from memory cache)となっているのですが、ここら辺は手掛かりになったりしないでしょうか？？？

[hoshi-takanori]

access_log ファイル名 main; の main は独自フォーマットを設定してるってことでしょうか？
いずれにせよ、アクセスログにはすべての情報は出てこないので、curl コマンドとかブラウザの開発者ツールとかで生のリクエストとレスポンスを確認すべきです。
画像のキャッシュは切って試してみるべきでは。access_log を off にする理由もないと思いますし。

[hoshi-takanori]

というか、access_log off; は off という名前のファイルに出力するという意味になるようですね。
https://serverfault.com/questions/318574/how-to-disable-nginx-logging

[退会済みユーザー]

え、そうなんですね…！まあ、確かにoffにする理由もないですしね。ちなみにキャッシュを消去したところ画像は全て表示されなくなりました。恐らく画像のルーティングも間違っている予感…。正直もうお手上げ状態です…。nginx難しい…！

[退会済みユーザー]

僕のイメージ的にはこの設定で、Reactのaxiosで/apiにアクセスするとlocalhost:8000にリバプロされるイメージなのですが、そもそもそこができていないということはないですよね…？

[退会済みユーザー]

あ、画像に関しては表示される様になりました！
一番下の画像のルーティングを消去したところ表示されました！
っていうか、index.htmlを読み込んでいる時点でこのルーティングは不要でしたね…。申し訳御座いません！

[退会済みユーザー]

何度も申し訳御座いません！
GET、POSTは反応するのですが、どうやらPUTが反応していないようです！

[hoshi-takanori]

もしかして、React も nginx を経由するようにすれば CORS 不要なのでは。

[退会済みユーザー]

度重なるご回答ありがとうございます！
Reactもnginxを経由するとは具体的にどういうことでしょうか？
一応、現在もaxiosを使ってnginxのリバプロ経由でLumen APIにアクセスしていますが、それとはまた別の意味合いでしょうか？？

[hoshi-takanori]

現在、index.html, main.js, css などは localhost:3000、api は localhost:80 (nginx) 経由で lumen だと思いますが、最終的には一つのサーバーで全部やるのではと思ったので…。
でも、CORS もちゃんと設定すれば動くはずなので、curl コマンドで API を叩いて、何が帰ってくるかちゃんと確認するのがいいと思います。
https://qiita.com/miminashi/items/f48cd4c25b06fcab5ea3

[退会済みユーザー]

postmanで叩いてみましたが、正常にレスポンスが帰ってきました…。この現象は一体なんなんでしょうか…？

[退会済みユーザー]

正常に動作いたしました！！！
php側でエラーが発生していました…。本当に申し訳御座いません…。
ただ、エラーとCORSにどういった関係があるのかが、よくわかりません…。
とりあえず、最後までご丁寧なご対応ありがとうございました！

[hoshi-takanori]

PHP 側でエラーが発生すると、CORS のヘッダーを設定する前にエラーメッセージを出力しちゃうので、ヘッダーが正常に出力されず、CORS エラーってことになるのでしょうね。CORS エラーな時点で中身（エラーメッセージも）は無視されるでしょうし。

Answer 1

PHPのエラーを修正したところ正常に動作いたしました！