AWS Lambda, S3 및 Stripe Checkout을 사용하는 Cloudfront 결제를 사용한 CORS 문제

Question

CORS에 대한 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> 

이 설정은 Cloudfront 배포에서 설정했습니다. Stripe Docs에 따라 보안 정책을 TLSv1.2_2018으로 변경했습니다. 개츠비가 작동하려면 실제 버킷 이름으로 설정되어야합니다. www.example.com.s3-website-eu-west-1.amazonaws.com S3는 서버를 제공 할 때 index.html 파일을 찾지 않으므로 URL 정리. http를 https로 변경하는 동작을 추가했습니다. GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE 및 Whitelised origin headers를 허용 된 HTTP 메소드로 설정했습니다.

스트라이프의 checkout.js를 사용하여 카드 세부 정보를 수집하고 가져 오기를 사용하여 주문을 만듭니다.

이

"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 인증서를 설정 : - 나는 오류가 내가 지불을 테스트 할 때

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) 
    }) 
} 

:

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 람다 함수 호출 : 여기 내 함수의 * .example.com에 대한

이 구현은 안전하며 액세스 제어 검사가 실패한 이유는 무엇입니까?

Answer 1

이것은 API 게이트웨이 설정에 문제가 있음이 밝혀졌습니다. CORS를 활성화하고 호출 기능에서 헤더를 삭제하면이 기능이 작동합니다.