在Squarespace集成Stripe时遇CORS错误，求排查方案

核心问题说明 #

这个CORS错误并非你的代码直接导致——Stripe官方域名间的请求本应由Stripe自行处理CORS配置，出现问题大概率是集成方式或环境配置有误。

具体排查步骤 #

• 规范加载Stripe.js
  必须直接从官方地址加载Stripe.js，禁止本地托管或代理该脚本，否则会破坏Stripe内部的域名信任机制。前端代码里要确保有：

  <script src="https://js.stripe.com/v3/"></script>
  

• 校验PaymentIntent后端逻辑
  后端Python代码要保证正确返回client_secret，同时接口响应头不能添加不合理的跨域限制。以Flask为例，正确的实现逻辑如下：

  from flask import Flask, jsonify, request
  import stripe
  
  app = Flask(__name__)
  stripe.api_key = "你的Stripe秘钥"
  
  @app.route('/create-payment-intent', methods=['POST'])
  def create_payment_intent():
      try:
          data = request.get_json()
          intent = stripe.PaymentIntent.create(
              amount=1000,
              currency='usd',
              payment_method_types=['card'],
          )
          return jsonify({'clientSecret': intent.client_secret})
      except Exception as e:
          return jsonify(error=str(e)), 403
  

  注意：若使用CORS扩展，要确保允许你的Squarespace站点域名访问后端接口，不要随意设置严格的Access-Control-Allow-Origin值。

• 调整Squarespace代码块位置
  Squarespace的代码块类型和位置会影响脚本执行：

  • 将Stripe.js脚本放在设置 > 高级 > 代码注入 > 页眉中，保证页面加载时优先初始化脚本。
  • 支付表单的HTML和Elements初始化JS代码放在页面的HTML代码块中，确保Stripe.js加载完成后再执行初始化逻辑。

• 检查测试环境与域名

  • 不要用localhost测试，改用Squarespace的官方预览域名（如your-site.squarespace.com），Stripe Elements对来源域名有验证机制。
  • 确保Stripe账户处于激活状态，测试模式下使用正确的测试秘钥，禁止混用生产与测试环境密钥。

• 清除浏览器缓存
  旧缓存可能导致脚本异常，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再测试。

额外处理方案 #

若以上步骤无效，可能是Squarespace的安全策略限制了请求：

• 在代码注入的页眉中添加CSP配置，允许Stripe相关域名的请求：

  <meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://api.stripe.com https://merchant-ui-api.stripe.com;">
  

• 联系Stripe支持，提供你的域名和错误截图，排查是否存在针对该域名的异常限制。

内容的提问来源于stack exchange，提问作者davidocodes