js设置document.domain实现跨域的注意点分析

关于“js设置document.domain实现跨域的注意点分析”的攻略，我将详细介绍如下：

什么是跨域？

在 Web 开发中，跨域是指在一个域下的文档或脚本试图去请求另一个域下的资源。简单来说，当浏览器向一个网站的服务器发送请求时，如果该请求要访问另外一个域名下的资源（比如 JavaScript 文件、CSS 文件等），那么就会发生跨域问题。

为什么需要跨域？

对于 Web 开发者来说，有时必须要与其他域名下的数据进行交互，这时就必须要解决跨域问题。比如，在我们自己的网站上嵌入第三方的广告，或者通过 AJAX 请求跨域资源等操作，都需要解决跨域问题。

js设置document.domain实现跨域

js设置 document.domain 来实现跨域是一种非常常用的跨域解决方案。当我们将一个字符串赋值给 document.domain 时，就可以将该页面的域名设置与被请求的资源的域名设置成同一个域名，从而实现跨域访问。

以示例 1 为例，假设我们有两个域名：www.example.com 和 data.example.com，如果这两个域名下的页面需要进行跨域访问，那么可以在它们的脚本中使用如下代码：

// 代码示例 1
document.domain = 'example.com';

在上述代码中，我们将 document.domain 的值设置为 example.com，这样 www.example.com 和 data.example.com 就共用了同一个域名，就能够进行跨域访问了。

不过，要想使用 document.domain 实现跨域，需要注意以下几点：

1. 被请求页和请求页的协议、端口、主机都必须相同，否则会出现跨域访问失败的问题。

2. 父域名必须相同，例如www.example.com和data.example.com两个站点，通过设置document.domain都为example.com来解决跨域问题。

示例 2

接下来我们就来看一下如何使用 document.domain 实现跨域 Ajax 请求，示例代码如下：

// 代码示例 2
document.domain = 'example.com';

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //do something
  }
}
xmlhttp.open('GET', 'http://data.example.com/data.json', true);
xmlhttp.send();

在上述代码中，我们同样将 document.domain 的值设置为 example.com，然后使用 XMLHttpRequest 对象进行 Ajax 请求。需要注意的是，由于是跨域请求，因此需要在被请求的资源所在的域名下设置 Access-Control-Allow-Origin 响应头，将请求域名加到白名单中，否则请求会出现跨域问题。