七牛---以一个七牛上传的实例小结下AJAX跨域【转】
http://blog.csdn.net/netdxy/article/details/50699842
使用七牛过程中，很多用户或多或少遇到跨域的问题，这篇文章主要介绍下跨域的概念来看什么情况下会出现跨域以及七牛关于跨域的策略。
关于跨域的，说白点就是去别服务器上取东西，域当然是别的服务器，只要协议、域名、端口有任何一个不同，都被当作是不同的域。这里以表单上传结合AJAX请求获取Token上传的Demo为切入点具体看下什么时候会出现跨域。
以下是Demo的代码示例，需要注意的是请求token的链接有两个
一个是服务端设置允许跨域的生成token的链接http://115.231.183.78//ServletDemo/servlet/UploadToken
另外一个是服务端没事设置允许跨域的生成token的链接http://115.231.183.78/ServletDemo/servlet/TokenNoCross
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript">
function xmlhttp() {
var $xmlhttp;
if (window.XMLHttpRequest) {
$xmlhttp = new XMLHttpRequest();
} else {
$xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return $xmlhttp;
}
window.onload = function() {
$xmlhttp = xmlhttp();
$xmlhttp.onreadystatechange = function() {
if ($xmlhttp.readyState == 4) {
if($xmlhttp.status == 200){
//设置id_token的值为请求upTokenUrl返回的值
document.getElementById('id_token').value = $xmlhttp.responseText;
}
}
}
//允许跨域的生成token的链接
$upTokenUrl = 'http://115.231.183.78//ServletDemo/servlet/UploadToken';
//不允许跨域的生成token的链接
//$upTokenUrl = 'http://115.231.183.78/ServletDemo/servlet/TokenNoCross';
$xmlhttp.open('GET', $upTokenUrl, true);
$xmlhttp.send();
};
</script>
</head>
<body>
<form action="http://up.qiniu.com" method="post" enctype="multipart/form-data" >
<table>
<tr>
<td>上传Token:</td>
<td><input id="id_token" name="token" type="text" style="width:300px"/></td>
</tr>
<tr>
<td>上传文件名:</td>
<td><input type="text" name="key" style="width:300px"></td>
</tr>
<tr>
<td>选择文件:</td>
<td><input type="file" name="file" style="width:300px"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="上传"/>
</td>
</tr>
</table>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
这里我将上面说的两种情况分别写入html然后放到另一台不同的IP的虚拟机里面，链接分别为：http://115.231.183.51/upnocross.html和http://115.231.183.51/upcancross.html
然后加载访问的情况是前者会预期出现AJAX请求Token出现跨域的情况而另一个链接请求是正常的，可以参考下面的截图：
前者出现跨域的截图： 
正常请求到Token(可以正常上传)的截图： 
根据上面的情况我们可以很清楚地了解跨域是怎样产生的，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象，解决的方法是可以在服务端设置运行跨域的响应头response.setHeader("Access-Control-Allow-Origin","*")即可。
以下给出Servlet中生成Token并且设置"Access-Control-Allow-Origin","*"的代码。
public class UploadToken extends HttpServlet {
public UploadToken() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String ACCESS_KEY = "um6IEH7mtwnwkGpjImD08JdxlvViuELhI4mFfoeL";
String SECRET_KEY = "TWvp6zA5HpfIReMr0dxxxxxxxxxxxxxxxxxxxxxx";
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
String token = auth.uploadToken("javademo", null, 3600*24, null);
response.setContentType("text/html");
//设置允许跨域的响应头
response.setHeader("Access-Control-Allow-Origin","*");
PrintWriter out = response.getWriter();
out.println(token);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
super.doGet(request,response);
}
public void init() throws ServletException {
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
再来看下面的图片中关于两个页面默认是否允许通信的情况就很好理解了。 
对于七牛JS跨域情况来说，总结如下:
1.上传，默认支持，在发起上传请求的时候，七牛的服务会返回相应的支持跨域的 Header,可以参考以下成功上传的截图中响应头信息： 
2.下载，默认不支持，可以通过配置支持。在你自己的空间中上传 crossdomain.xml 就可以了，其crossdomain.xml里面的内容如下
<cross-domain-policy>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
3.管理(比如文件删除复制移动)，不支持，管理服务器不支持js跨域请求(主要是为了数据安全), 如果需要只能从服务端发送管理操作请求。
需要注意的是七牛点播平台空间域名默认有302跳转，AJAX请求会出现跨域，需要取消域名的302跳转才可以。
另外，也可以参考下这篇文章中的表述:
HTTP访问控制(CORS)
七牛---以一个七牛上传的实例小结下AJAX跨域【转】的更多相关文章
- 从Ueditor跨域上传，总结的一次跨域上传的爬坑经历
项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...
- OSS阿里云上传文件 前端js下载url跨域问题
场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 关于七牛云存储，HTTPS资源上传不成功问题
关于七牛云存储,HTTPS资源上传不成功问题 官方给出了一个解决方案,亲测可用.特此记录一下. 找到QNConfiguration.m文件.然后重写两个方法,直接上代码. + (instancetyp ...
- 将本地的一个新项目上传到GitHub上新建的仓库中去
转载: 如何将本地的一个新项目上传到GitHub上新建的仓库中去 踩过的坑: 1.在git push时报错 error: RPC failed; curl 56 SSL read: error:000 ...
- 在github上新建一个仓库并上传本地工程
扫盲:在github上新建一个仓库并上传本地工程 http://1ke.co/course/194 我自己新建了个项目,一步一步流程如下. zhoudd@desay:~/桌面/mini_embed_d ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
- 用命令行在本地创建一个库并上传到Github
1 如何在本地创建一个仓库并上传到github? 基本步骤: $ mkdir blog //在桌面上创建一个叫"blog"的目录 $ cd blog //"cd blo ...
- 判断大文件是否上传成功（一个大文件上传到ftp,判断是否上传完成）
大文件上传ftp,不知道有没有上传完成,如果没有上传完成另一个程序去下载这个文件,导致下载不完整. 判断一个文件是否上传完成的方法: /** * 间隔一段时间去计算文件的长度来判断文件是否写入完成 * ...
随机推荐
- iOS使用webView 加载网页，在模拟器中没有问题，而真机却白屏了。App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist f
还在info.plist中配置.除了配置允许上网的配置之外,还有另一项.
- linux下编译安装boost库
linux下编译安装boost库 linux下编译安装boost库 1.下载并解压boost 1.58 源代码 下载 解压 2.运行bootstrap.sh 3.使用b2进行构建 构建成功的提示 4. ...
- 一个完整的Http请求
一个完整的http请求,通常有以下7点: 1.建立tcp连接 2.web浏览器web服务器发送请求命令 3.web浏览器发送请求头信息 4.web服务器应答 5.web服务器发送应答信息 6.web服 ...
- 【GoLang】GoLang 的流程与函数
003.GO流程与函数 1 概述 1.1 Go中流程控制分三大类:条件判断,循环控制和无条件跳转 2 流程 2.1 if 2.1.1 if条件判断语句中不需要括号 2.1.2 条件判断语句里面允许声明 ...
- Thread.Sleep vs. Task.Delay
We use both Thread.Sleep() and Task.Delay() to suspend the execution of a program for some given tim ...
- 流程图制作在云上 https://www.processon.com/
流程图制作在云上 : https://www.processon.com/
- windows下打开VMware虚拟机时提示内存不足的处理方法
参考:http://thinkpig007.blog.51cto.com/971471/1589831 以管理员身份运行vmware.exe即可 错误的错误提示: Not enough physica ...
- mysql 安装和卸载
1.1 上次课内容回顾: MVC案例: * Servlet * 处理请求. * JSP * 显示数据 * JSTL+EL显示数据. * JavaBean * 封装和处理数据 * BeanUtils封装 ...
- ACM/ICPC 之 用双向链表 or 模拟栈 解“栈混洗”问题-火车调度(TSH OJ - Train)
本篇用双向链表和模拟栈混洗过程两种解答方式具体解答“栈混洗”的应用问题 有关栈混洗的定义和解释在此篇:手记-栈与队列相关 列车调度(Train) 描述 某列车调度站的铁道联接结构如Figure 1所示 ...
- intel 面试总结
昨天面了intel的Android部门,基无意外,面试的效果不是很好,很多问题没有回答上来,看来如果要进intel这种大公司光靠SJTU光环是远远不够的,必须要有真才实学.面试的还是一位交大学长,本科 ...