如何避免Shopify页面中第三方JS脚本拦截我的Fetch POST请求？

解决方案 #

1. 优先缓存原生Fetch/Request API

第三方脚本能够拦截你的请求，本质是篡改了window全局对象上的fetch和Request构造函数。你只需要在你的脚本最先执行的位置就把原生API缓存下来，后续业务逻辑全部使用缓存的原生API，不受全局对象被篡改的影响：

// 脚本第一行就执行缓存，必须早于所有第三方脚本加载
const myFetch = window.fetch;
const myRequest = window.Request;

// 后续业务代码直接调用缓存的API，不要用全局的fetch/Request
let request = new myRequest('/create_new_product/', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

let vm1 = this;
myFetch(request)
.then(response => response.json())
.then(data => {
  console.log('Success creating variant:', data);
  console.log('variant_id:', data.variant_id);
  if (data.variant_id) {
    vm1.addNewVariantToCart(this.variants, data.variant_id);
    vm1.$emit('clearall');
    setTimeout(function(){ vm1.isLoading = false; }, 2000);
  }
  else if (data.Error) {
    alert(data.Error);
    vm1.isLoading = false;
  }
})
.catch((error) => {
  console.error('Error:', error);
  vm1.isLoading = false;
});

如果担心缓存的变量被第三方脚本扫描全局修改，可以把整个业务逻辑封装在闭包内，不暴露缓存的原生API到全局：

;(function(fetch, Request) {
  // 所有业务代码写在闭包内，直接用传入的fetch和Request
  // ...你的业务逻辑
})(window.fetch, window.Request);

2. 调高脚本加载优先级

在Shopify的主题配置里，把你的应用脚本的注入位置调整到<head>标签最顶部，早于所有平台注入的第三方脚本执行，确保你缓存原生API的时候，全局的fetch还没有被篡改。

3. 备用方案：专属接口标识

如果还是有异常，可以给你的所有接口添加专属的自定义请求头，比如X-My-App-Request: 1，就算遇到第三方脚本会过滤请求，也可以通过这个标识让你的请求跳过第三方的处理逻辑。

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