【Nuxt.js/Laravel】CORSエラーについて

Question

前提・実現したいこと

フロントエンドとバックエンドでサーバーを分けて開発をしています
・フロントエンド： Nuxt.js, Netlify　
・バックエンド： Laravel, Heroku　

バックエンドでstripeのcheckoutページを作成して、決済画面にリダイレクトさせたいのですがCORSエラーが発生しました。

発生している問題・エラーメッセージ

CORSエラーが発生しています。

Access to XMLHttpRequest at 'https://checkout.stripe.com/pay/cs_test_XXXXX' (redirected from 'https://liff-nuxt-laravel-ec.herokuapp.com/api/stripe/store') from origin 'https://deploy-preview-4--liff-nuxt-laravel-ec.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

フロントエンド

<template>
  <div class="card">
    <img class="card-product-img" :src="this.$route.query.image" />
    <p class="card-product-name">{{ this.$route.query.name }}</p>
    <p class="card-product-price">¥{{ this.$route.query.price }}</p>
    <div class="button">
      <button type="submit" class="button-btn" @click="buyProducts">購入する</button>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    script: [
      {
        src: 'https://js.stripe.com/v3/',
      },
    ],
  },
  methods: {
    async buyProducts() {
      const res = await this.$axios.$post('/stripe/store', {
        productImage: this.$route.query.image,
        productName: this.$route.query.name,
        productPrice: this.$route.query.price,
        productStripePriceApi: this.$route.query.stripePriceApi,
      });
      console.log(res);
    },
  },
};
</script>

バックエンド

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Stripe\Stripe;
use Stripe\Checkout\Session;

class PayloadController extends Controller
{
  public function store(Request $request)
  {
    // API
    $stripeApiKey = config("env.stripe_api_key");
    Stripe::setApiKey($stripeApiKey);

    // header
    header('Content-Type: application/json');

    // domain（仮ドメイン）
    $domain = "https://deploy-preview-4--liff-nuxt-laravel-ec.netlify.app";

    // product
    $productImage = $request->input("productImage");
    $productName = $request->input("productName");
    $productPrice = $request->input("productPrice");
    $productStripePriceApi = $request->input("productStripePriceApi");

    // checkout
    $checkout_session = Session::create([
      'payment_method_types' => ['card'],
      'line_items' => [[
        'price' => $productStripePriceApi,
        'quantity' => 1,
      ]],
      'mode' => 'payment',
      'success_url' => $domain . '/success',
      'cancel_url' => $domain . '/cancel',
    ]);

    return redirect($checkout_session->url, 303, [], true);
  }
}

CORS

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
  public function handle($request, Closure $next)
  {
    return $next($request)
      ->header('Access-Control-Allow-Origin', '*')
      ->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
      ->header('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN');
  }
}

考えたこと

Access-Control-Allow-Origin: *と指定しているので、どのドメインに対してもCORSはうまくいくと思っていました。

リダイレクトを行うときには別のheader情報を付与する必要があるのかと思い調べてみました。
https://rinoguchi.net/2019/05/302-redirect-cors.html

上記の記事内では302を使う場合、CORSエラーが発生し、対策としては302をやめるしかないとのことでした。

2点質問があります。
①私も同様に、303リダイレクトをやめるべきなのでしょうか？

②バックエンド側でリダイレクトが使えないのならば、「このURLをフロントエンド側に渡して、フロントエンド側でページ移動を行う」というものは考えついたのですが、そのような対応でいいのでしょうか？

ご確認よろしくお願いいたします。

追記

404エラーのRequest Headers情報です。

Answer 1

プリフライトリクエスト（OPTIONS、最初のキャプチャ画像）に対する応答が404になっているのが原因だと思います。あと、このキャプチャの下半分（HTTPリクエスト）にも必要な情報があるので、追記してください。

---

（追記）

HTTPリクエストヘッダの情報ありがとうございます。リダイレクトだとOrigin: nullとなるのですね。これは知りませんでした。
しかし、検証環境を作って調べてみたところ、Origin: nullでも、Access-Control-Allow-Origin: * レスポンスを返しておけば、CORSのエラーにはなりません。
なので、現状リダイレクト先で404となり、CORSのヘッダが返せていないことが原因だと思います。

Comments

[RyoS_]

ご回答ありがとうございます。
追記いたしました。

[RyoS_]

ご回答ありがとうございます。
適切なヘッダーが転送されていないということですね。
これはどこに問題があると考えるべきなのでしょうか？

また、1点アドバイスをいただきたいのですが、フロントエンド側のnuxt.jsにこちらのURLを渡して、
window.location.href = url;でページ移動をするのはどうなのでしょうか？
動作確認はでき正しく動くことがわかりました。

[ockeghem]

それは私からは回答できないですし、別の質問とすべきだと思います。ただ、stripe固有の問題となると、回答は得られにくい気がします。

[RyoS_]

承知しました。
ご親切にありがとうございます！