ExtJS 使用store的sync方法时如何向服务器发送自定义请求头

完全支持向服务端发送自定义请求头参数，可根据业务场景选择以下实现方式：

• 全局配置所有Ajax请求携带自定义头
  适合需要在所有业务请求中统一携带的参数（比如身份认证token、应用版本标识等），配置后所有通过ExtJS发起的Ajax请求（包括store的sync同步请求）都会自动携带对应头：

Ext.Ajax.defaultHeaders = {
  'Authorization': 'Bearer ' + currentUserToken,
  'X-App-Version': '1.3.2'
};

• 为指定Store的Proxy配置固定自定义头
  如果只需要某一个Store的所有读写请求（包含sync同步请求）携带自定义头，可以直接在Store关联的Proxy的headers配置项中定义：

Ext.define('OrderStore', {
  extend: 'Ext.data.Store',
  model: 'OrderModel',
  proxy: {
    type: 'rest',
    url: '/api/order/batch',
    // 自定义请求头，仅当前Store的所有请求生效
    headers: {
      'X-Biz-Module': 'order',
      'X-Request-Id': Ext.data.identifier.Uuid.create().generate()
    },
    reader: {
      type: 'json',
      rootProperty: 'list'
    }
  }
});

• 单次sync请求临时添加自定义头
  如果只需要某一次调用sync的时候额外加头，可以直接在sync方法的入参中配置，也可以监听Proxy的beforerequest事件做动态逻辑处理：

// 直接在sync调用时传入自定义头
orderStore.sync({
  headers: {
    'X-Operate-Type': 'batchEdit'
  },
  success: () => {
    Ext.Msg.alert('提示', '数据同步成功');
  },
  failure: () => {
    Ext.Msg.alert('提示', '数据同步失败，请重试');
  }
});

// 动态加头示例，适合需要根据运行时场景判断头参数的需求
orderStore.getProxy().on('beforerequest', (proxy, request) => {
  request.setRequestHeader('X-Timestamp', Date.now().toString());
});

注意：如果是跨域请求场景，自定义请求头需要服务端配置Access-Control-Allow-Headers允许对应的头参数，否则浏览器会拦截请求。以上实现兼容ExtJS 4.x及以上所有主流版本。

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