zoukankan      html  css  js  c++  java
  • Ajax 跨域问题(JSONP && Access-Control-Allow-Origin)

    1.使用jsonp跨域请求
    2.通过设置服务端头部跨域请求
    3.设置nginx/apach

    使用jsonp跨域请求

    什么是Jsonp

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

    JSONP的作用

    由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

    使用方法

    jQuery实现方式

    • $.ajax
        $.ajax({  
            url:"http://aa.com/get.php?callback=?",   //注意带callback默认将回调方法名call传递后台
            dataType:'jsonp',  
            data:'',  
            jsonp:'call',  //jsonpCallback就是可以指定我们自己的回调方法名call,远程服务接受callback参数的值就不再是自动生成的回调名,而是call。dataType是指定按照JSOPN方式访问远程服务。
            success:function(data) {  
                console.log(data.value);
            },    
        });
    

    后台接收代码

    $arr=array('a'=>'A','b'=>'B');
    $data=json_encode($arr);      
    $callback=isset($_GET['callback'])?$_GET['callback']:'';
    echo  $callback."($data)";
    

    PS:JSONP相对简单,但只支持GET方式调用,不如POST方式安全。
    PS:JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

    通过设置服务端头部跨域请求

    即通过设置 Access-Control-Allow-Origin 来实现跨域。

    允许单个域名访问

    只允许接受http://art.com端发来的请求,并进行回应

    header('Access-Control-Allow-Origin:http://art.com');
    

    允许多个域名访问

    $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
    
    $allow_origin = array(
    'http://art1.com',
    'http://art2.com'
    );
    
    if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Origin:'.$origin); 
    }   
    

    允许所有域名访问

    header('Access-Control-Allow-Origin:*');   
    

    不设置类型,默认就是get

    post相应模式

    <?php  
    $ret = array(  
    'name' => isset($_POST['name'])? $_POST['name'] : '',  
    'age' => isset($_POST['age'])? $_POST['age'] : ''  
    );  
    header('content-type:application:json;charset=utf8');
    //允许权限  
    header('Access-Control-Allow-Origin:*');  
    //类型
    header('Access-Control-Allow-Methods:POST');
    // 响应头设置    
    header('Access-Control-Allow-Headers:x-requested-with,content-type');  
    
    echo json_encode($ret);  
    ?>
    

    设置nginx/apach

    方法和第二种类似

    //Nginx
    
    http {
      ......
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
      ......
    }
    
    Apache :
    
    <Directory />
    ......
    Header set Access-Control-Allow-Origin *
    </Directory>
  • 相关阅读:
    Markdown 画 UML 图(六)
    Markdown 高级技巧(五)
    Markdown 链接、图片、表格(四)
    16.3Sum Closet
    15.Three Sum
    11.Container With Most Water
    1.Two Sum
    优化学习笔记5
    优化学习笔记4
    优化学习笔记3
  • 原文地址:https://www.cnblogs.com/attitudeY/p/7159112.html
Copyright © 2011-2022 走看看