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. [BZOJ1503][NOI2004]郁闷的出纳员

    [BZOJ1503][NOI2004]郁闷的出纳员 试题描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是 ...

  2. [codevs1141]数列

    [codevs1141]数列 试题描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12 ...

  3. BestCoder Round #61 1001 Numbers

    Problem Description There are n numbers A1,A2....An{A}_{1},{A}_{2}....{A}_{n}A​1​​,A​2​​....A​n​​,yo ...

  4. 11.3---旋转有序数组之后查找元素（CC150）

    思路,这道题用二分,唯一的不同就是,1,a[left]<a[mid].那么说明左右有序,如果key还在a[left],a[mid]之间,就在这里找,如果不在就在右边找.注意:这里<要改成& ...

  5. 7.6--找过点最多的直线（CC150）

    直接两个点确定一条直线.然后两两组合,再写一个看过多少个点的函数.一直更新max就行. import java.util.Arrays; public class Solution { public ...

  6. apache poi 生成excel

    ExcelBuilder.Java package com.coracle.yk.xmanager.util.poi; import com.coracle.yk.xframework.util.Bl ...

  7. 修改apache上传文件大小限制

    PHP上传文件大小限制解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M    post_max_size = 10M    memory_limi ...

  8. curl api create domain

    from: https://adam.younglogic.com/2013/09/keystone-v3-api-examples/ http://docs.openstack.org/develo ...

  9. 【GoLang】golang 微服务框架 介绍

    原文如下: rpcx是一个类似阿里巴巴 Dubbo 和微博 Motan 的分布式的RPC服务框架,基于Golang net/rpc实现. 谈起分布式的RPC框架,比较出名的是阿里巴巴的dubbo,包括 ...

  10. 使用Grub Rescue恢复Ubuntu引导

    装了Ubuntu和Window双系统的电脑,通常会使用Ubuntu的Grub2进行引导. Grub2会在MBR写入引导记录,并将引导文件放在/boot/grub,破坏任意一项都会导致系统无法正常启动. ...