Ajax XMLHttpRequest 入门：跨域请求指南

前端

2023-10-14 12:13:46

跨域请求指南：提升 Web 应用交互性和安全性

什么是跨域请求？

在现代 Web 开发中，跨域请求是至关重要的技术，允许客户端脚本与不同域名服务器上的 Web 应用程序通信。这种技术打破了浏览器的安全限制，让开发者能够创建交互性更强、更灵活的应用程序。

跨域请求的限制

出于安全考虑，浏览器默认限制跨域请求。这是因为恶意脚本可能会利用跨域请求来访问敏感信息或执行未经授权的操作。

跨域资源共享 (CORS)

为了解决跨域请求的限制，引入了 CORS 机制。CORS 是一组 HTTP 头，用于指定哪些域名可以访问受保护资源，例如发送跨域请求。

要启用 CORS，服务器必须在响应头中设置以下 HTTP 头：

Access-Control-Allow-Origin： 指定允许访问受保护资源的域名。
Access-Control-Allow-Methods： 指定允许的 HTTP 请求方法，例如 GET、POST、PUT 等。
Access-Control-Allow-Headers： 指定允许的 HTTP 头字段，例如 Content-Type、Authorization 等。
Access-Control-Max-Age： 指定预检请求 (OPTIONS 请求) 的缓存时间（以秒为单位）。

使用 XMLHttpRequest 发送跨域请求

要使用 XMLHttpRequest 发送跨域请求，需要遵循以下步骤：

创建一个 XMLHttpRequest 对象。
设置请求 URL 和 HTTP 方法。
设置 CORS 相关属性（例如，withCredentials）。
发送请求。
处理服务器响应。

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求 URL 和 HTTP 方法
xhr.open('GET', 'https://example.com/api/data');

// 设置 CORS 相关属性
xhr.withCredentials = true;

// 发送请求
xhr.send();

// 处理服务器响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理成功响应
  } else {
    // 处理错误响应
  }
};