AWS Lambda、S3、Stripe CheckoutによるCloudfront支払いを使用したCORSの問題

Question

CORSの私のe-commerceセットアップと私の理解でCORSに問題があります。

AWS S3でホストされているReactアプリ（Gatsby）があります。 CORSの設定は次のように設定されています。

<?xml version="1.0" encoding="UTF-8"?> 
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*.example.com</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>DELETE</AllowedMethod> 
     <AllowedMethod>HEAD</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
    </CORSConfiguration> 

これはCloudwardディストリビューションで設定されています。私はStripe Docsに従ってセキュリティポリシーをTLSv1.2_2018に変更しました。 Gatsbyを動作させるには、実際のバケット名に設定する原点が必要です（www.example.com.s3 -website-eu-west-1.amazonaws.com）.S3は、そのサービスを提供する際にindex.htmlファイルを探しません。クリーンURL。 httpをhttpsに変更する動作を追加しました。 GET、HEAD、OPTIONS、PUT、POST、PATCH、DELETE、および白化されたオリジンヘッダーを許可するHTTPメソッドを設定しました。

私はStripeのcheckout.jsを使用してカードの詳細を収集し、フェッチを使用して注文を作成しています。ここに私の関数があります：

async onToken (token, args) { 
    try { 
    let response = await fetch(process.env.STRIPE_CHECKOUT_URL, { 
     method: 'POST', 
     headers: { 
     'Access-Control-Allow-Origin': '*' 
     }, 
     body: JSON.stringify({ 
     token, 
     order: { 
      currency: this.props.currency, 
      coupon: this.props.coupon, 
      items: [ 
      { 
       type: 'sku', 
       parent: this.props.skuId 
      } 
      ], 
      shipping: { 
      name: args.shipping_name, 
      address: { 
       line1: args.shipping_address_line1, 
       city: args.city, 
       postal_code: args.shipping_address_zip 
      } 
      } 
     } 
     }) 
    }) 

    let orderJson = await response.json() 
    } catch(err) { 
    alert(err) 
    } 
    history.push({ 
    pathname: '/thankyou/', 
    state: { orderId: orderJson.order.id } 
    }) 
    history.go() 
} 

だから、これはAWSラムダ関数を呼び出します。

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY) 

module.exports.handler = (event, context, callback) => { 
    const requestBody = JSON.parse(event.body) 

    // token info 
    const token = requestBody.token.id 
    const email = requestBody.token.email 

    // order info 
    const currency = requestBody.order.currency 
    const items = requestBody.order.items 
    const shipping = requestBody.order.shipping 
    const coupon = requestBody.order.coupon 

    // Create order 
    return stripe.orders.create({ 
    email: email, 
    coupon: coupon.id, 
    currency: currency, 
    items: items, 
    shipping: shipping 
    }).then((order) => { 

    // Pay order with received token (from Stripe Checkout) 
    return stripe.orders.pay(order.id, { 
     source: token // obtained with Stripe.js 
    }).then((order) => { 
     const response = { 
     statusCode: 200, 
     headers: { 
      'Access-Control-Allow-Origin': '*' 
     }, 
     body: JSON.stringify({ 
      message: `Order processed succesfully!`, 
      order 
     }) 
     } 
     callback(null, response) 
    }) 
    }).catch((err) => { // Error response 
    console.log(err) 
    const response = { 
     statusCode: 500, 
     headers: { 
     'Access-Control-Allow-Origin': '*' 
     }, 
     body: JSON.stringify({ 
     error: err.message 
     }) 
    } 
    callback(null, response) 
    }) 
} 

私は支払いをテストするとき - 私はエラーを取得する：

"failed to load {lambda function url}": Response to preflight request 
doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 'https://www.example.com' 
is therefore not allowed to access. The response had HTTP status code 
403..." 

私のSSL証明書が設定されています* .example.comの

この実装は安全であり、なぜアクセス制御チェックに失敗しますか？

Answer 1

これは、APIゲートウェイの設定に問題があることが判明しました。 CORSを有効にして、呼び出し元関数からヘッダーを削除すると、これが機能します。