• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax跨域访问Cookie丢失问题的解决方法

    ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章《ajax 设置Access-Control-Allow-Origin实现跨域访问》

    1.ajax跨域访问,cookie丢失

    首先创建两个测试域名

    a.fdipzone.com 作为客户端域名

    b.fdipzone.com 作为服务端域名

    测试代码

    setcookie.PHP 用于设置服务端cookie

    ?php
    setcookie('data', time(), time()+3600);
    ?>

    server.php 用于被客户端请求

    ?php
    $name = isset($_POST['name'])? $_POST['name'] : '';
    $ret = array(
     'success' => true,
     'name' => $name,
     'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
    );
    // 指定允许其他域名访问
    header('Access-Control-Allow-Origin:http://a.fdipzone.com');
    // 响应类型
    header('Access-Control-Allow-Methods:POST'); 
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,content-type');
    header('content-type:application/json');
    echo json_encode($ret);
    ?>

    test.html 客户端请求页面

    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    html>
     head>
     meta http-equiv="content-type" content="text/html;charset=utf-8">
     script src="//code.jquery.com/jquery-1.11.0.min.js">/script>
     title> ajax 跨域访问cookie丢失的解决方法 /title>
     /head>
     body>
     script type="text/javascript">
     $(function(){
      $.ajax({
       url: 'http://b.fdipzone.com/server.php', // 跨域
       dataType: 'json',
       type: 'post',
       data: {'name':'fdipzone'},
       success:function(ret){
        if(ret['success']==true){
         alert('cookie:' + ret['cookie']);
        }
       }
      });
     })
     /script>
     /body>
    /html>

    首先先执行http://b.fdipzone.com/setcookie.php, 创建服务端cookie。

    然后执行http://a.fdipzone.com/test.html

    输出

    {"success":true,"name":"fdipzone","cookie":""}

    获取cookie失败。

    2.解决方法

    客户端

    请求时将withCredentials属性设置为true

    使可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求,会用下面的HTTP头部来响应。

    服务端

    设置header

    header("Access-Control-Allow-Credentials:true");

    允许请求带有验证信息

    test.html 修改如下

    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    html>
     head>
     meta http-equiv="content-type" content="text/html;charset=utf-8">
     script src="//code.jquery.com/jquery-1.11.0.min.js">/script>
     title> ajax 跨域访问cookie丢失的解决方法 /title>
     /head>
     body>
     script type="text/javascript">
     $(function(){
      $.ajax({
       url: 'http://b.fdipzone.com/server.php', // 跨域
       xhrFields:{withCredentials: true}, // 发送凭据
       dataType: 'json',
       type: 'post',
       data: {'name':'fdipzone'},
       success:function(ret){
        if(ret['success']==true){
         alert('cookie:' + ret['cookie']);
        }
       }
      });
     })
     /script>
     /body>
    /html>

    server.php 修改如下

    ?php
    $name = isset($_POST['name'])? $_POST['name'] : '';
    $ret = array(
     'success' => true,
     'name' => $name,
     'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
    );
    // 指定允许其他域名访问
    header('Access-Control-Allow-Origin:http://a.fdipzone.com');
    // 响应类型
    header('Access-Control-Allow-Methods:POST'); 
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,content-type');
    // 是否允许请求带有验证信息
    header('Access-Control-Allow-Credentials:true');
    header('content-type:application/json');
    echo json_encode($ret);
    ?>

    按之前步骤执行,请求返回

    {"success":true,"name":"fdipzone","cookie":"1484558863"}

    获取cookie成功

    3.注意事项

    1.如果客户端设置了withCredentials属性设置为true,而服务端没有设置Access-Control-Allow-Credentials:true,请求时会返回错误。

    XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://a.fdipzone.com' is therefore not allowed access.

    2.服务端header设置Access-Control-Allow-Credentials:true后,Access-Control-Allow-Origin不可以设为*,必须设置为一个域名,否则回返回错误。

    XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' heade

    下面看下Ajax跨域请求COOKIE无法带上的解决办法

    原生ajax请求方式:

    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 
    xhr.withCredentials = true; //支持跨域发送cookies
    xhr.send();

    jquery的ajax的post方法请求:

     $.ajax({
        type: "POST",
        url: "http://xxx.com/api/test",
        dataType: 'jsonp',
        xhrFields: {
          withCredentials: true
        },
       crossDomain: true,
       success:function(){
      },
       error:function(){
     }
    })

    服务器端设置:

    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Origin: http://www.xxx.com");

    以上所述是小编给大家介绍的Ajax跨域访问Cookie丢失问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • PHP实现cookie跨域session共享的方法分析
    • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题
    • 基于axios 解决跨域cookie丢失的问题
    • Angularjs之如何在跨域请求中传输Cookie的方法
    • 利用nginx解决cookie跨域访问的方法
    • axios中cookie跨域及相关配置示例详解
    • ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
    • Ajax跨域请求COOKIE无法带上的完美解决办法
    • php跨域cookie共享使用方法
    • Cookie跨域问题解决方案代码示例
    上一篇:Ajax动态为下拉列表添加数据的实现方法
    下一篇:Ajax 设置Access-Control-Allow-Origin实现跨域访问
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax跨域访问Cookie丢失问题的解决方法 Ajax,跨域,访问,Cookie,丢失,