HTML5-CORS

什么是CORS？

CORS（跨域资源共享）是一种用于在浏览器中处理跨域资源请求的机制。当一个网页的原始代码尝试访问来自其他域的资源时，由于同源策略的限制，通常会被浏览器阻止。CORS通过在服务器响应中包含一些特殊的头部信息，告知浏览器该域允许被访问，从而解决了跨域访问的问题。

CORS的工作原理

CORS使用了HTTP头部信息进行通信。当浏览器发起一个跨域请求时，会在请求头中加入 Origin 字段，标明该请求的来源域。服务器根据该字段进行验证，并在响应头中包含 Access-Control-Allow-Origin 字段，告知浏览器该资源允许访问的域。

CORS还可以使用其他的头部字段来控制不同类型的请求，如 Access-Control-Allow-Methods 可以指定允许的请求方法，Access-Control-Allow-Headers 可以指定允许的请求头部信息等。

在HTML5中使用CORS

在HTML5中，可以通过使用XMLHttpRequest对象来发起跨域请求。该对象提供了一些属性和方法来设置CORS请求的参数，如 withCredentials 可以指定是否发送凭证信息（如Cookie）等。

以下是一个使用CORS进行跨域请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.withCredentials = true; // 启用跨域请求的凭证信息
xhr.onreadystatechange = function() {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.send();

这段代码会向 https://api.example.com 发起一个GET请求，并启用了跨域请求的凭证信息。

注意：CORS必须在服务器端进行相应的配置，以允许来自其他域的请求。具体的配置方法和方式会根据服务器的不同而有所差异。

总结

CORS是一种在HTML5中处理跨域资源请求的机制，通过在服务器响应中包含特殊的头部信息，告知浏览器哪些域可以访问该资源。使用CORS可以解决浏览器中的跨域访问问题，并允许开发者在网页中访问不同域的资源。