JavaScript 怎么通过 Ajax 发送带请求头的 GET 数据-js教程-PHP中文网

javascript发送带请求头的get请求最常用fetch api，参数须拼在url后、不可用body；兼容旧浏览器用xmlhttprequest，需open后setrequestheader；fetch不支持get设content-type。

javascript 怎么通过 ajax 发送带请求头的 get 数据

JavaScript 通过 Ajax 发送带请求头的 GET 请求，最常用且推荐的方式是使用 fetch API；如果需要兼容老浏览器（如 IE），可改用 XMLHttpRequest。关键在于：GET 请求不能在请求体（body）中传数据，参数必须拼在 URL 后，而请求头需通过 headers 选项或 setRequestHeader 方法设置。

用 fetch 发送带自定义头的 GET 请求

fetch 默认不发送某些敏感请求头（如 Authorization、Content-Type），但对大多数自定义头（如 X-Api-Key）是允许的。注意：GET 请求没有 body，所有参数应作为查询字符串附加到 URL 中。

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const url = new URL('https://api.example.com/data');
url.searchParams.append('page', 1);
url.searchParams.append('limit', 10);

fetch(url.toString(), {
  method: 'GET',
  headers: {
    'X-Api-Key': 'your-api-key-here',
    'Accept': 'application/json'
    // ⚠️ 不要设 Content-Type（GET 无 body），否则可能被浏览器忽略或报错
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

用 XMLHttpRequest 手动设置请求头

XMLHttpRequest 更底层，兼容性更好，但写法稍繁琐。需在 open() 之后、send() 之前调用 setRequestHeader()。

示例：

const xhr = new XMLHttpRequest();
const url = 'https://api.example.com/data?page=1&limit=10';

xhr.open('GET', url, true);
xhr.setRequestHeader('X-Api-Key', 'your-api-key-here');
xhr.setRequestHeader('Accept', 'application/json');

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status 

<h3>常见注意事项和限制</h3>

CORS 问题：若目标接口未开启跨域支持，带自定义头（如 X-Api-Key）的请求会触发预检（preflight），此时后端必须响应 Access-Control-Allow-Headers，否则浏览器直接拦截。
禁止设置的请求头：浏览器会自动过滤部分危险头，如 Cookie、Host、Content-Length 等，即使写了也不会生效。
认证类头建议用标准字段：如 Authorization: Bearer xxx 比自定义 X-Auth-Token 更规范，也更容易被服务端中间件识别。
URL 编码要手动处理：若参数含中文或特殊符号（如空格、&），务必用 encodeURIComponent() 编码，或直接用 URLSearchParams 构建。

简单封装一个 GET 工具函数（fetch 版）

便于复用，自动处理参数拼接和错误：

function apiGet(url, params = {}, headers = {}) {
  const urlObj = new URL(url);
  Object.entries(params).forEach(([k, v]) => {
    urlObj.searchParams.append(k, v);
  });

  return fetch(urlObj.toString(), {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      ...headers
    }
  })
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  });
}

// 使用
apiGet('https://api.example.com/users', { role: 'admin' }, {
  'X-Api-Key': 'abc123'
})
.then(data => console.log(data));

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南