【跨域异常】跨域解决方案之----通过document.domain实现跨域访问

比眉伴天荒 2021-12-16 22:41 387阅读 0赞

**本文目录**

一、跨域问题产生的原因

1.1 域名拓展

二、解决方案

2.1 方案1

2.2 方案2

--------------------

# 一、跨域问题产生的原因 #

Javascript出于对安全性的考虑，而禁止两个或者多个不同域的页面进行互相操作。相同域的页面在相互操作的时候不会有任何问题。我们在用跨域的时候。大部分都在知道哪些问题是跨域问题，也知道怎么解决。但是就是具体解决，或者说最终解决，都不理想，或者最终解决不了。

解决方案，大部分人都会回答，document.domain、jsonp、iframe，只是不知道具体怎么去解决。

一般出现这些问题。

Error: Permission denied to access property xxxx

跨域了，然后去访问原来域的内容，就会这样。因为域不一样，导致访问失败。怎么解决呢。首先用document.domain来指定域，是可以的，但是有局限性，也就是一级域名一致才可以。如下：

> www.xxx.com  下指到xxx.com 是可以的。  
> icp.xxx.com  下指到 xxx.com 是可以的。  
> 像上面是可以的，因为一级域名都是 xxx.com 。
> 
> www.xxx.com下指到 www.baidu.com是不行的。  
> xxx.com指到 baidu.com还是不行的。

像上面是不可以的，因为一级域名都不一致，这个情况下，会报错：

NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

> 规则说明了，那么下面来说怎么解决吧，当然要结合 Iframe  。
> 
> 需求：  
> 比如我们要在当前页面下，“www.xxx.com/shiro” 下上传图片到 "cdn.xxx.com/images/" 下去。直接搞肯定是不行的。
> 
> 解决方法：  
> 在请求“www.xxx.com/shiro” 的时候，写上如下代码：

if(document.domain !='xxx.com'){
        document.domain = 'xxx.com';
    }

然后在上传的地址“cdn.xxx.com” 的Iframe 文件内写上一样的代码。

if(document.domain !='xxx.com'){
        document.domain = 'xxx.com';
    }

这样上传就是在相同的域下了，有的人是少了第一步，其实仔细想想，正所谓跨域，就是指你使用功能的时候，当前域和使用的域不一样，所以要在前面就指定就可以了。故保证一致。

## 1.1 域名拓展 ##

**PS：**这里额外补充一下，能懂就懂，不懂也没事。  
**一级域名：**一级域名中只含有一个“.”，且“.”左边要没有内容。最后一个点的右边被称为一级域名，一级域名又被称为顶级域名。下面列出的都是一级域名，如：.com（表示商业机构）、.org（表示非营利性组织）、.gov（表示政府机构）、.edu（表示教育机构）、.mil（表示军事机构）等等。有人把www.xxx.com叫一级域名这是错误的。  
**二级域名：**英语：Second-level domain；英文缩写：SLD，是互联网DNS等级之中，处于顶级域名之下的域。二级域名是域名的倒数第二个部分，例如在域名example.baidu.com中，二级域名是Baidu。如：xxx.com、baidu.com等等。

> **以百度贴吧为例：**  
> **.com 顶级域名/一级域名  
> baidu.com 二级域名  
> tieba.baidu.com 三级域名  
> detail.tieba.baidu.com 四级域名  
> (其他级别域名以此类推)**

# 二、解决方案 #

## 2.1 方案1 ##

**利用document.domain 实现跨域**

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域。比如在：aaa.com的一个网页（a.html）里面 利用iframe引入了一个bbb.com里的一个网页（b.html）。这时在a.html里面可以看到b.html里的内容，但是却不能利用javascript来操作它。因为这两个页面属于不同的域，在操作之前，js会检测两个页面的域是否相等，如果相等，就允许其操作，如果不相等，就会拒绝操作。这里不可能把a.html与b.html利用JS改成同一个域的。因为它们的基础域名不相等。（强制用JS将它们改成相等的域的话会报跟上面一样的"参数无效错误。"）所以如果在a.html里引入aaa.com里的另一个网页，是不会有这个问题的，因为域相等。  
有另一种情况，两个子域名：  
aaa.xxx.com  
bbb.xxx.com  
aaa里的一个网页（a.html）引入了bbb 里的一个网页（b.html），这时a.html里同样是不能操作b.html里面的内容的。因为document.domain不一样，一个是aaa.xxx.com，另一个是bbb.xxx.com。  
这时我们就可以通过Javascript，将两个页面的domain改成一样的，需要在a.html里与b.html里都加入：  
document.domain = "xxx.com";

**PS：**某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。  
问题：  
1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。  
2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

## 2.2 方案2 ##

根据错误提示信息，按要求修改请求的url即可。

[在另一篇博客里记录着，请移步至此：][Link 1][https://blog.csdn.net/weixin\_44299027/article/details/105968382][Link 1]

[Link 1]: https://blog.csdn.net/weixin_44299027/article/details/105968382