如何在JavaScript或jQuery中获取AJAX请求方法以设置非GET请求头？

当然有办法实现这个需求！不管你用jQuery还是原生JavaScript，都能在AJAX请求发送前判断请求方法，自动为非GET请求添加指定头。我分两种场景给你详细说明：

一、使用jQuery的方案 #

jQuery提供了ajaxPrefilter方法，它会在每个AJAX请求发送前触发，非常适合用来统一处理请求配置。你可以在这里轻松获取请求方法，并针对性设置请求头：

// 全局预处理所有jQuery AJAX请求
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  // options.type 就是当前请求的方法（默认是GET），转大写避免大小写问题
  const requestMethod = options.type.toUpperCase();
  
  // 如果不是GET方法，添加自定义请求头
  if (requestMethod !== 'GET') {
    // 示例：添加Authorization和Content-Type头，你可以换成自己需要的
    jqXHR.setRequestHeader('Authorization', 'Bearer your-access-token');
    jqXHR.setRequestHeader('Content-Type', 'application/json');
  }
});

说明： #

• options参数包含了当前AJAX请求的所有配置项，type就是请求方法（比如'GET'、'POST'）
• jqXHR是jQuery封装的XMLHttpRequest对象，用setRequestHeader方法添加请求头
• 这个方法是全局生效的，所有通过$.ajax、$.get、$.post发送的请求都会被处理

二、原生JavaScript的方案 #

如果不用jQuery，原生的XMLHttpRequest和fetch API也能实现同样的效果，下面分别举例：

1. 基于XMLHttpRequest封装 #

你可以封装一个自定义AJAX函数，在内部判断请求方法并设置头：

function customAjax(url, options = {}) {
  const xhr = new XMLHttpRequest();
  // 取传入的方法，默认是GET，转大写统一判断
  const method = (options.method || 'GET').toUpperCase();

  xhr.open(method, url, true);

  // 非GET请求添加头
  if (method !== 'GET') {
    xhr.setRequestHeader('Authorization', 'Bearer your-access-token');
    xhr.setRequestHeader('Content-Type', 'application/json');
  }

  // 处理响应逻辑
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 成功回调，可根据需求调整
      options.success?.(JSON.parse(xhr.responseText));
    } else {
      options.error?.(new Error(`请求失败：${xhr.statusText}`));
    }
  };

  xhr.onerror = function() {
    options.error?.(new Error('网络请求出错'));
  };

  // 发送请求数据（如果是POST/PUT等方法）
  const requestData = options.data ? JSON.stringify(options.data) : null;
  xhr.send(requestData);
}

// 使用示例
customAjax('/api/user', {
  method: 'POST',
  data: { username: 'test', password: '123456' },
  success: (res) => console.log('请求成功：', res),
  error: (err) => console.error('请求失败：', err)
});

2. 基于Fetch API封装（推荐现代项目使用） #

Fetch是ES6+的原生API，更简洁灵活。你可以封装一个全局可用的fetch函数，自动处理非GET请求的头：

// 封装自定义fetch，统一处理请求头
function customFetch(url, options = {}) {
  const method = (options.method || 'GET').toUpperCase();
  
  // 合并配置：非GET请求添加默认头，同时允许传入的头覆盖默认
  const fetchConfig = {
    ...options,
    headers: {
      ...(method !== 'GET' ? {
        'Authorization': 'Bearer your-access-token',
        'Content-Type': 'application/json'
      } : {}),
      ...options.headers // 保留传入的自定义头
    }
  };

  // 非GET请求处理请求体
  if (method !== 'GET' && options.data) {
    fetchConfig.body = JSON.stringify(options.data);
  }

  return fetch(url, fetchConfig);
}

// 使用示例
customFetch('/api/user/1', {
  method: 'PUT',
  data: { username: 'updated-test' }
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
  return res.json();
})
.then(data => console.log('更新成功：', data))
.catch(err => console.error('请求出错：', err));

进阶：全局拦截所有Fetch请求

如果你想让所有原生fetch请求都自动生效，还可以重写window.fetch方法：

const originalFetch = window.fetch;
window.fetch = function(url, options = {}) {
  const method = (options.method || 'GET').toUpperCase();
  
  const modifiedOptions = {
    ...options,
    headers: {
      ...(method !== 'GET' ? {
        'Authorization': 'Bearer your-access-token',
        'Content-Type': 'application/json'
      } : {}),
      ...options.headers
    }
  };

  if (method !== 'GET' && options.data) {
    modifiedOptions.body = JSON.stringify(options.data);
  }

  return originalFetch(url, modifiedOptions);
};

这样不管你在项目哪个地方调用fetch，非GET请求都会自动带上你设置的头，不用每次手动配置。

内容的提问来源于stack exchange，提问作者dev-eloper