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跨域【转】的更多相关文章

  1. 从Ueditor跨域上传，总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  2. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  3. 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 ...

  4. 关于七牛云存储，HTTPS资源上传不成功问题

    关于七牛云存储,HTTPS资源上传不成功问题 官方给出了一个解决方案,亲测可用.特此记录一下. 找到QNConfiguration.m文件.然后重写两个方法,直接上代码. + (instancetyp ...

  5. 将本地的一个新项目上传到GitHub上新建的仓库中去

    转载: 如何将本地的一个新项目上传到GitHub上新建的仓库中去 踩过的坑: 1.在git push时报错 error: RPC failed; curl 56 SSL read: error:000 ...

  6. 在github上新建一个仓库并上传本地工程

    扫盲:在github上新建一个仓库并上传本地工程 http://1ke.co/course/194 我自己新建了个项目,一步一步流程如下. zhoudd@desay:~/桌面/mini_embed_d ...

  7. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

  8. 用命令行在本地创建一个库并上传到Github

    1  如何在本地创建一个仓库并上传到github? 基本步骤: $ mkdir blog //在桌面上创建一个叫"blog"的目录 $ cd blog //"cd blo ...

  9. 判断大文件是否上传成功（一个大文件上传到ftp,判断是否上传完成）

    大文件上传ftp,不知道有没有上传完成,如果没有上传完成另一个程序去下载这个文件,导致下载不完整. 判断一个文件是否上传完成的方法: /** * 间隔一段时间去计算文件的长度来判断文件是否写入完成 * ...

随机推荐

  1. linux u-boot跟踪方法总结

    拿到一块板子,其中很重要的一项就是看电路图还有Datasheet. 这个真的很重要,首先你要知道cpu的架构是什么,armv7?arvmv5?还是其他的,哪个公司的芯片?是freescale 还是TI ...

  2. net-snmp的dateandtime数据类型

    net-snmp的dateandtime数据类型 2015/06/12 16:35:59 DateAndTime是Snmpv2中的一种数据类型,它主要提供了对日期时间的描述. 在开发一个snmp相关程 ...

  3. zencart安装后修改configure.php权限

    刚安装完zencart的时候,打开前台页面会遇到下面的安全提示: “警告: 配置文件允许写入: E:\upupw\htdocs\mysite\includes\configure.php,存在安全隐患 ...

  4. 9. JEB 1.5插件编写一

    2.0之后好像新增加了很多API,有所区别 本文采用Java+Eclipse作为开发环境 插件支持的语言  文档: jeb-1.5/doc/index.html 一.Hello World工程 1. ...

  5. discuz内置常用CSS代码分析

    CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...

  6. scp和rsync限制传输速度

    1.scp 限速100KB/s scp -l 1000 test root@192.168.1.104 此时的传输速率就是1M/8=100KB左右 2.rsync 限速100KB/s rsync -a ...

  7. OpenStack网络指导手册 －基本网络概念

    转自:http://blog.csdn.net/zztflyer/article/details/50441200 目录(?)[-] 以太网Ethernet 虚拟局域网VLANs 子网和地址解析协议S ...

  8. 【GoLang】GoLang 错误处理 -- 官方推荐方式 示例

    最严谨的方式,Always检查error,并做相应的处理 项目结构: 代码: common.go: package common import ( "github.com/pkg/error ...

  9. Docker个人学习总结

    最近一段时间学习了下Docker,关于Docker的安装,运用什么的在这里我不会过多的说明,我只说我对于Docker的一些理解,附加我用于记录的少量代码. 刚开始学习Docker的时候,找资料在网上看 ...

  10. ios Tabbar Item 的图标

    1,tabBarItem图片的推荐尺寸和最大支持尺寸 下面是标签栏(UITabBar)中tab按钮图标分别在1x.2x.3x下不会压缩变形的尺寸: @1x : 推荐 25 x 25   (最大: 48 ...