如何修复加载Klarna iframe时出现的跨域错误？

问题根因 #

你配置CORS头的方向完全错误：跨域限制的规则是被请求的目标站点需要在返回的响应头中携带CORS配置，本次报错的请求是发往sentry.io的，你在自己站点Plesk后台加的Access-Control-Allow-Origin头只会作用于用户请求你站点资源的场景，对发往第三方站点的请求没有任何作用。

另外要注意：你给出的Klarna加载代码本身不会默认发送sentry相关请求，该报错和Klarna SDK的核心逻辑无关，优先排查站点内植入的第三方脚本。

修复步骤 #

• 第一步：先注释掉当前的Klarna加载代码，刷新结算页，如果跨域报错仍然存在，直接排除Klarna的影响，排查站点自有脚本即可

  // 注释后验证错误是否还出现
  // Klarna.Payments.load({
  //   container: '#klarna-payments-pay-over-time',
  //   payment_method_category: 'pay_over_time'
  // }, function (res) {
  //   console.debug(res);
  // });
  

• 第二步：根据错误来源对应修复

  场景A：站点自有Sentry错误采集脚本导致报错

  • 优先检查Sentry初始化的dsn配置是否和Sentry后台给出的一致，sentry_key参数错误会直接触发跨域拦截
  • 不需要使用Sentry的话直接删除站点内所有Sentry引入、初始化代码即可消除错误
  • 需要保留Sentry的话，登录Sentry后台对应项目的「安全域名」设置页，添加你当前站点的完整域名（包含协议、端口），Sentry服务端会自动返回合法的CORS头

  场景B：Klarna SDK来源非法

  • 确认你引入的Klarna SDK为官方CDN版本，不要使用第三方托管、自行下载到本地的篡改版本，官方SDK地址为https://x.klarnacdn.net/kp/lib/v1/api.js，测试和生产环境均使用该地址即可

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