七牛---以一个七牛上传的实例小结下AJAX跨域转

Posted 歉信君 —— 信真科技·信守真品 www.xinzhenkj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了七牛---以一个七牛上传的实例小结下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跨域转的主要内容，如果未能解决你的问题，请参考以下文章

安卓批量上传图片到七牛的两种方法

七牛上传开发（三）使用NodeJS生成带数据处理的凭证

php上传文件与图片到七牛的实例详解

node 七牛云上传文件

Canvas保存图片到七牛云

Canvas保存图片到七牛云