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. 关闭MyEclipse Derby服务

    MyEclipse的Servers视图出现 MyEclipse Derby服务,一直想把它去掉在网上搜索了下,现已解决. 如下,MyEclipse菜单:window-->Preferences- ...

  2. Android学习之路书籍推荐

    Android开发书籍推荐:从入门到精通系列学习路线书籍介绍 JAVA入门书籍: < Introduction to java programming > < Core java & ...

  3. 如何用极路由+OpenWrt+RTL电视棒搭建一台SDR服务器，并隐秘地捕获和传输数据

    0×00 前言 近期因为有个从异地捕获无线信号的需求,便尝试着用OpenWrt+公网IP搭建了一台SDR服务器.如果有小伙伴嫌SDR硬件天线看起来太乱.或者电脑没有足够的USB接口也可在局域网搭建SD ...

  4. Ubuntu固定ip和dns配置和查看

    1.查看dns: cat /etc/resolv.conf 2.Ubuntu固定ip sudo vim /etc/network/interfaces 修改如下部分: auto p3p1 iface ...

  5. SqlServer中的Null值空值问题

    sql使用的是三值谓词逻辑,所以逻辑表达式返回的结果可以为True.False或者未知,在三值逻辑中返回True与不返回False并不完全一样, SQL对查询过滤条件的处理:接受TURE  拒绝FAL ...

  6. javax.imageio.IIOException: Can't create cache file!

    javax.imageio.IIOException: Can't create cache file! at javax.imageio.ImageIO.createImageInputStream ...

  7. python模块介绍- collections(5)-OrderedDict 有序字典

    1.3.5 OrderedDict 有序字典 OrderedDict是dict的子类,它记住了内容添加的顺序. import collections print 'Regular dictionary ...

  8. centos6.5 tomcat开机启动

    可参考:centos6.5 nginx开机启动 /etc/init.d/下添加tomcatd文件,内容如下: #!/bin/sh # # chkconfig: - # # Licensed to th ...

  9. centos7最小版本安装nginx+tomcat+java+mysql运行环境

    最近项目从windows搬到linux,由于项目组成员有限并且有其它紧急的任务需要处理,因而这个任务就落到我的头上了.下面记录下centos最小版本安装nginx+tomcat+mysql+java的 ...

  10. ffmpeg-20160803-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...