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

JSON 2019-05-15 16:56:12 21264

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

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

  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” 下上传图片到 "abc.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 即可。


版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/179.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
Maven的Mirror和Repository 的详细讲解
Linux 安装 Redis 详细步骤讲解
Golang 常见设计模式——装饰模式详细讲解
Freemarker Macro,Freemarker 宏参数传递详细讲解
Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮
Bootstrap Affix 插件 高级用法详细讲解
SEO 之 SpringMVC redirect 301,301和302区别详细讲解
TCP 和 UDP协议详细讲解,优缺点分析讲解
HttpClient 获取详细的头信息
Spring JPA查询,JPA 根据方法名字查询详细介绍
最新文章
Python print() 函数 17
PHP if/else/elseif 语句 70
HTML5 Canvas弧线教程 52
Java赋值运算符 118
XML内部实体和外部实体 217
Java面向对象编程概念 177
PHP回显语句 128
Linux—文件树 135
C语言while循环和do while循环 150
Python元组剖析 209
最热文章
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 682667
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 674741
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 603014
免费天气API,天气JSON API,不限次数获取十五天的天气预报 581149
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 553154
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 509458
Elasticsearch教程(四) elasticsearch head 插件安装和使用 480074
Jackson 美化输出JSON,优雅的输出JSON数据,格式化输出JSON数据... ... 264911
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 244332
Elasticsearch教程(一),全程直播(小白级别) 225661
支付扫码

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

查看我的收藏

正在加载... ...