document.domain解决跨域问题,详细讲解。

soゝso 2016-09-29 14:45:42 5382
分享到:

我们在用跨域的时候。大部分都在知道哪些问题是跨域问题,也知道怎么解决。但是就是具体解决,或者说最终解决,都不理想,或者最终解决不了。咱们这做一下系统的说明。

跨域的几种情况,一般在哪出现。

  1. 上传图片、文件。
  2. 富文本编辑器,像我的KingEditor群里,经常会问到这个问题。
  3. 页面直接请求第三方接口。
  4. ... ... 。

解决方案,大部分人都会回答,document.domain 、 jsonp  iframe  ,只是不知道具体怎么去解决。下面都来讲解一下,怎么使用和局限性。

关于 JSONP  ,只能解决接口调用的问题。具体这里不做讲解,详情请看我另外一篇博客:JSONP 的工作原理,JSONP Demo讲解

重点来说一下document.domain 。一般出现这些问题。

Error: Permission denied to access property xxxx

跨域了,然后去访问原来域的内容,就会这样。因为域不一样,导致访问失败。怎么解决呢。

首先用document.domain来指定域,是可以的,但是有局限性,也就是一级域名一致才可以。如下:

www.sojson.com  下指到sojson.com 是可以的。

icp.sojson.com  下指到 sojson.com 是可以的。

像上面是可以的,因为 一级域名  都是 sojson.com

www.sojson.com  下指到 www.baidu.com  是不行的。

sojson.com  指到 baidu.com  还是不行的。

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

NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

规则说明了,那么下面来说怎么解决吧,当然要结合 Iframe 

需求:

比如我们要在当前页面下,“www.sojson.com/shiro” 下上传图片到 "cdn.www.sojson.com/images/" 下去。直接搞肯定是不行的。

解决:

在请求“www.sojson.com/shiro” 的时候,写上如下代码:

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

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

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

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

ps:这里额外补充一下,能懂就懂,不懂也没事。

一级域名  有的人叫根域名,如:sojson.com、baidu.com、sina.com、sina.com.cn、sina.cn.net 等等。

二级域名  是指增加了一级,包括www。如:www.sojson.com、icp.sojson.com、zhidao.baidu.com、www.baidu.com  等等。有人把www.sojson.com叫一级域名这是错误的。

三级、四级一直下去,照理推下去就明白了,腾讯和新浪很多这样的域名,甚至有5-6级的。都是用qq.com。这里想说一个什么事情呢,就是上面讲解的说要一级域名一致,其实严格来说是父域名一致。

举个栗子:

abc.www.baidu.com cdf.www.baidu.com  他们就都可以document.domain 指定到 www.baidu.com 即可。


关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
Maven的Mirror和Repository 的详细讲解
Bootstrap Affix 插件 高级用法详细讲解
Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮
HttpClient 获取详细的头信息
BlockingQueue 方法详细描述
Ehcache配置详细解释
Shiro教程,Shiro 配置文件详细解释,Shiro自定义Filter配置
解JavaScript中splice()方法,有Demo详细介绍
Shiro 通过配置Cookie 解决多个二级名的单点登录问题
对Java的常用对象(POJO、DTO、PO、BO、VO、DAO)详细解释及应用场景
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39212
SOJSON 使用又拍云 CDN 整体架构,解决百度 SEO 方案 33
又拍云(Upyun)刷新CDN,云存储缓存 —JavaAPI 20
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 87
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 45
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 102
CDN 请求返回 connection reset by peer,被拦截请求解决方案 37
Google AdSense 申请技巧,谷歌广告申请通不过教程 75
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 51
Java 随机从 List 随机获取多个不重复对象,Mysql 随机10条数据 75
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39214
Elasticsearch教程(四) elasticsearch head 插件安装和使用 109192
Elasticsearch教程(六) elasticsearch Client创建 73333
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70770
Elasticsearch教程(二),IK分词器安装 67527
Elasticsearch教程(三),IK分词器安装 (极速版) 54098
Elasticsearch教程(五) elasticsearch Mapping的创建 51659
Elasticsearch教程(一),全程直播(小白级别) 51448
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47798
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40972

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...