使用 AWS Lambda、S3 和 Cloudfront 付款和 Stripe Checkout 的 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。为了让 Gatsby 工作，它需要将源设置为真实的存储桶名称：www.example.com.s3-website-eu-west-1.amazonaws.com，因为 S3 在为其提供服务时不会查找 index.html 文件干净的网址。我添加了一种将 http 更改为 https 的行为。我已将允许的 HTTP 方法设置为 GET、HEAD、OPTIONS、PUT、POST、PATCH、DELETE 和白化的原始标头。

我正在使用 Stripe 的 checkout.js 来收集卡片详细信息并使用 fetch 创建订单。这是我的功能：

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 Lambda 函数：

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 并从调用函数中删除标头使其工作。