如何为联盟伙伴创建嵌入脚本并解决跨域XMLHttpRequest错误？

为什么出现XMLHttpRequest错误 #

直接使用$('#123UniqueID').load('https://www.awebsite.com #myDIV')触发了浏览器的同源策略限制——不同域名的网页无法通过AJAX直接请求其他域名的资源，这是浏览器的安全机制，因此会抛出跨域请求错误。

如何允许特定网站发起跨域请求 #

方法1：配置CORS（跨域资源共享） #

在你的服务器上设置Access-Control-Allow-Origin响应头，指定允许的联盟网站域名：

• 单个联盟网站的话，比如允许https://partner-example.com，可在服务器配置中添加：

  Access-Control-Allow-Origin: https://partner-example.com
  

• 多个联盟网站的情况下，浏览器不支持直接设置多个域名，需要后端动态判断请求的Origin头是否在授权列表中，再返回对应Access-Control-Allow-Origin值。例如PHP实现：

  $allowedOrigins = ['https://partner1.com', 'https://partner2.com'];
  $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
  if (in_array($origin, $allowedOrigins)) {
      header("Access-Control-Allow-Origin: $origin");
  }
  

  仅授权列表内的域名能发起跨域请求。

方法2：配合密钥验证增强安全性 #

仅靠域名验证存在伪造风险（比如恶意网站篡改请求头），可给每个联盟伙伴分配唯一密钥，让他们在请求时携带：

1. 修改联盟伙伴的嵌入代码，添加密钥参数：

   <script src="https://www.awebsite.com/123UniqueScript.js?key=PARTNER_UNIQUE_KEY" type="text/javascript"></script>
   <div id="123UniqueID"></div>
   

2. 在你的123UniqueScript.js中，请求时带上密钥：

   // 提取URL中的密钥参数
   const urlParams = new URLSearchParams(window.location.search);
   const key = urlParams.get('key');
   // 携带密钥发起请求
   $('#123UniqueID').load(`https://www.awebsite.com/get-div-content?key=${key}`);
   

3. 后端接口get-div-content先验证密钥有效性，仅合法密钥才返回目标DIV的HTML内容，同时配置CORS头。

这是不是最佳实现方式？ #

直接用$.load加载整页再提取片段并非最优方案，推荐优化为：

• 在你的网站创建专门接口（如/api/get-partner-div），仅返回#myDIV的HTML内容，减少带宽消耗与加载时间。
• 联盟伙伴的脚本通过AJAX请求该接口，获取内容后插入指定DIV。
• 结合CORS与密钥验证，确保只有授权联盟网站能获取内容。

另外，也可让联盟伙伴使用服务器端代理（自己搭建脚本从你的网站拉取内容后返回），但这种方式需要伙伴额外开发，不如你这边提供接口便捷。

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