一文读懂XMLHttpRequest发送get、post请求，轻松解决跨域问题

前端

2023-06-06 18:38:58

使用XMLHttpRequest掌控网络：发送GET和POST请求，解决跨域难题

了解XMLHttpRequest

XMLHttpRequest (XHR) 是一种浏览器API，用于在不刷新页面（异步）的情况下与服务器进行通信。它允许您发送GET和POST请求，自定义请求头和属性，轻松实现与服务器交互。

跨域通信中的障碍：跨域资源共享（CORS）

当您尝试向不同域或子域的服务器发送请求时，可能会遇到CORS错误。CORS是一种安全机制，旨在防止未经授权的网站访问敏感数据。

解决跨域问题：设置CORS头

要解决跨域问题，您需要在服务器端设置CORS头。这些头指定哪些网站可以访问您的数据，具体方法因服务器端技术而异。例如，在PHP中，您可以使用以下代码：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');

发送GET请求

GET请求用于检索服务器上的数据。以下是使用XHR发送GET请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/users');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.send();

发送POST请求

POST请求用于向服务器发送数据。以下是使用XHR发送POST请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 201) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.send(JSON.stringify({name: 'John Doe'}));