HTML5 中的 Web CORS 是什么？

Web CORS（Cross-Origin Resource Sharing）是一种用于在不同域名或端口之间共享资源的机制。在基于浏览器的应用程序中，由于同源策略的限制，跨域请求通常是不允许的。但是，在某些情况下，我们希望在不同的域名或端口之间共享资源，这时就需要使用 Web CORS 了。

如何使用 Web CORS？

在使用 Web CORS 之前，需要了解以下三个概念：

1. 请求域：发起跨域请求的域名或端口。

2. 响应域：响应跨域请求的域名或端口。

3. 跨域请求：从请求域向响应域发起的请求。

在 HTML5 中，使用 Web CORS 非常简单，只需要在服务器端设置相应的响应头即可。以下是设置 CORS 响应头的示例代码：

var http = require('http');

http.createServer(function (req, res) {

  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',      // 允许任何请求域访问本服务器
    'Access-Control-Allow-Headers': 'Content-Type',     // 允许请求头中包含 Content-Type 字段
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'   // 允许的请求方法
  });

  // ... 其他服务器响应代码 ...

}).listen(8080);

在上面的代码中，我们设置了三个响应头：

• Access-Control-Allow-Origin：指定允许访问本服务器的请求域。在示例中，我们设置为 *，即允许任何请求域访问本服务器。

• Access-Control-Allow-Headers：指定允许在请求头中携带的字段。在示例中，我们允许请求头中包含 Content-Type 字段。

• Access-Control-Allow-Methods：指定允许的请求方法。在示例中，我们允许 GET、POST、PUT、DELETE 和 OPTIONS 方法。

设置好响应头后，我们就可以在请求域中跨域访问响应域中的资源了。以下是使用 AJAX 进行跨域请求的示例代码：

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:8080/data.json', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

在上面的代码中，我们使用 AJAX 发起了一个 GET 请求，请求地址为 http://localhost:8080/data.json，这是一个位于响应域上的资源。由于设置了正确的响应头，我们可以在请求域中正常获取到该资源。

注意事项

在使用 Web CORS 时，需要注意以下几个问题：

1. 需要在服务器端设置正确的响应头。

2. 被请求的资源需要允许跨域访问。

3. 建立跨域请求时，需要使用正确的请求方法和请求头。

4. 如果需要携带 Cookies 进行跨域请求，需要设置 withCredentials 属性为 true。但是，在设置了 withCredentials 后，Access-Control-Allow-Origin 响应头将不能使用通配符 *，必须指定请求域。

以上就是关于 HTML5 中的 Web CORS 的介绍。使用 Web CORS 可以方便地在不同域名或端口之间共享资源，但需要注意安全性和正确性。