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

时间：2022-11-11 19:46:44

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出现跨域的情况而另一个链接请求是正常的，可以参考下面的截图： 
前者出现跨域的截图： 
七牛---以一个七牛上传的实例小结下AJAX跨域【转】
正常请求到Token(可以正常上传)的截图： 
七牛---以一个七牛上传的实例小结下AJAX跨域【转】

根据上面的情况我们可以很清楚地了解跨域是怎样产生的，简单地理解就是因为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

再来看下面的图片中关于两个页面默认是否允许通信的情况就很好理解了。 
七牛---以一个七牛上传的实例小结下AJAX跨域【转】

对于七牛JS跨域情况来说，总结如下: 
1.上传，默认支持，在发起上传请求的时候，七牛的服务会返回相应的支持跨域的 Header,可以参考以下成功上传的截图中响应头信息： 
七牛---以一个七牛上传的实例小结下AJAX跨域【转】
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&comma;判断是否上传完成）

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

随机推荐

  1. trie树的建立方法汇总

    方法一:孩子兄弟表示法 即对于某一个点,记录他的第一个孩子以及他的同父亲的下一个儿子. 具体代码如下: #include <cstdio> #include <cstring> ...

  2. TDA - Thread Dump Analyzer &lpar;Java线程分析工具&rpar;

    TDA - Thread Dump Analyzer (Java线程分析工具)http://automationqa.com/forum.php?mod=viewthread&tid=2351 ...

  3. 将main方法打成jar包，并引用第三方的maven jar包

    一.准备工作.执行命令 学习插件: 学习apache的打包插件maven-assembly-plugin:http://maven.apache.org/plugins/maven-assembly- ...

  4. 【转载】CMake 简介和 CMake 模板

    转载自我的博客: CMake 简介和 CMake 模板 . 如果你用 Linux 操作系统,使用 cmake 会简单很多,可以参考一个很好的教程: CMake 入门实战 | HaHack .如果你用 ...

  5. &lbrack;JS&rsqb;深入理解JavaScript系列（4）：立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  6. asp&period;net mvc 用Redis实现分布式集群共享Session。

    1.这两天研究Redis搞分布式session问题,网上找的资料都是用ServiceStack.Redis来实现的,但是在做性能测试的时候发现最新的v4版本有限制每小时候最多请求6000次,因为官网开 ...

  7. poj 1077-Eight&lpar;八数码&plus;逆向bfs打表&rpar;

    The 15-puzzle has been around for over 100 years; even if you don't know it by that name, you've see ...

  8. automaticallyAdjustsScrollViewInsets &lpar;iOS&rpar;

    [摘要:@当我们正在一个UIViewController中同时建立2个tableView的时间,若是把它们的frame中的Y坐标设置为一样,您大概会发明它们的地位并出有到达您念要的效果.比方第一tab ...

  9. 部署Java Web项目报错（一）

    今天,我在部署Java Web项目时,出现错误,并且在eclipse新建一个servers,却出现多个项目. 具体错误截图如下: 然后,我又将项目部署到JBoss服务器中,却还是运行不成功 22:12 ...

  10. JAVA调用外部安装7-Zip压缩和解压zip文件

    1.首先在本地安装7-Zip(下载链接:https://www.7-zip.org/)2.调用7-Zip压缩.zip文件: /**      * 生成.zip压缩文件      * @param fi ...

相关文章