zoukankan      html  css  js  c++  java
  • 跨域资源共享CORS与JSONP

    同源策略限制:

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说阅读私密邮件,发送虚假邮件,查看聊天记录等等。所谓同源是指,协议,域名,端口相同。三者只有有一个不相同,就认为不同源!

    JSONP:

    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

    原理:含有src属性的标签都可以跨域,如img、script、iframe!

    本质:只是执行了javascript脚本!

    简单来说,就是在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数(返回带数据参数的回调函数的字符串,在客户端刚好被动态执行了!)。

    jQuery中对JSONP的实现:

    jQuery中提供了两个方法来实现:$.getJSON()和$.ajax(),常用的是底层的$.ajax()方法!

    1.$.getJSON():

    $.getJSON(url?jsoncallback=?,data,fn(data){…})

    关键点:在url后带上参数jsoncallback=?,后台返回随机命名的callback函数!会被Jquery自动替换成回调方法的名称!

    1 <script type="text/javascript">
    2  $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?", function (data) { 
    3  var myprops = data.itemcats_get_response.item_cats.item_cat;
    4             $.each(myprops, function (index, item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") });
    5         }
    6 
    7         );
    8 </script>

    2. $.ajax():

    $.ajax({ 
    url: url, 
    data: data, 
    dataType : “jsonp”, 
    jsonp: “jsoncallback”, 
    jsonpCallback:”success_jsonpCallback”, 
    success: callback 
    });

     1  $.ajax({
     2      type : "get", //jquey是不支持post方式跨域的
     3      async:false,
     4      url :"http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
     5      dataType : "jsonp",//传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
     6      jsonp: "jsoncallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
     7      jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
     8      success : function(json){ 
     9              alert(json);
    10      }
    11 });

    以上的jsonp和jsonpCallback可以自定义回调函数名和参数名!

    注意:

    1. 需要服务器端的支持才行。
    2. 只支持get请求

    CORS跨域资源共享(真正跨域)

    跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的

    CORS与JSONP相比:

    • JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
    • 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
    • JSONP主要被老的浏览器支持,但它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS

    参考:AJAX跨域请求和CORS跨域资源共享

    在webapp/WEB-INF/web.xml下配置:

     1 <filter>
     2       <filter-name>CorsFilter</filter-name>
     3       <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
     4       <init-param>
     5         <param-name>cors.allowed.methods</param-name>
     6         <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
     7       </init-param>
     8       <init-param>
     9         <param-name>cors.allowed.headers</param-name>
    10         <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    11       </init-param>
    12       <async-supported>true</async-supported>
    13     </filter>
    14     <filter-mapping>
    15       <filter-name>CorsFilter</filter-name>
    16       <url-pattern>/*</url-pattern>
    17     </filter-mapping>

      注:<async-supported>true</async-supported>是Servlet3.0新特性的异步处理标签

         Servlet 线程不再是一直处于阻塞状态以等待业务逻辑的处理,而是启动异步线程之后可以立即返回

        传送门:Servlet 3.0 新特性详解

    连接:

    跨域资源共享(CORS)问题解决方案

    spring boot的方案

    CORS 跨域 实现思路及相关解决方案

     

  • 相关阅读:
    【HDU 4305】Lightning(生成树计数)
    【HDU 1150】Machine Schedule(二分图匹配)
    【HDU 2063】过山车(二分图匹配)
    透过Nim游戏浅谈博弈
    [SCOI2010]字符串
    [SCOI2010]传送带[三分]
    [SCOI2010]序列操作[分块or线段树]
    HDU 5306 Gorgeous Sequence[线段树区间最值操作]
    1455: 罗马游戏[左偏树or可并堆]
    Codevs 5914 [SXOI2016]最大值
  • 原文地址:https://www.cnblogs.com/soul-wonder/p/8876604.html
Copyright © 2011-2022 走看看