登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> SoftHub关联区 >> 主题: [js]ajax 中其实是可以自带 cookie 的,不需要 withCredential 参数,那是指的跨域名    [最新]     [回主站]
[js]ajax 中其实是可以自带 cookie 的,不需要 withCredential 参数,那是指的跨域名
clq
浏览(113) - 2020-01-17 13:41:47 发表 编辑

关键字: javascript

[2020-01-17 13:44:56 最后更新]
[js]ajax 中其实是可以自带 cookie 的,不需要 withCredential 参数,那是指的跨域名



参考以下两篇文章。
https://www.cnblogs.com/eret9616/p/9660782.html
https://blog.csdn.net/weixin_37615202/article/details/88892441

clq  2020-01-17 13:42:27 发表 编辑

https://www.cnblogs.com/eret9616/p/9660782.html

 ajax请求携带 cookie

之前都有这样一个理解:
ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须哟啊设置withCredential为true。
这个说法会让人产生完全扭曲的误解,我就是其中之一。
完整的无歧义的表述应该是这样:
1.ajax会自动带上同源的cookie,不会带上不同源的cookie
2. 可以通过前端设置withCredentials为true, 后端设置Header的方式让ajax自动带上不同源的cookie,但是这个属性对同源请求没有任何影响。会被自动忽略。
3. 这是MDN对withCredentials的解释: MDN-withCredentials ,我接着解释一下同源。
众所周知,ajax请求是有同源策略的,虽然可以应用CORS等手段来实现跨域,但是这并不是说这样就是“同源”了。ajax在请求时就会因为这个同源的问题而决定是否带上cookie,这样解释应该没有问题了吧,还不知道同源策略的,应该去谷歌一下看看。

实验
第一步: 建立一个本地服务器

1.新建一个demo文件夹,进入文件夹,用php -S localhost:9000开启一个本地服务器
2.在demo文件夹下新建一个index.php文件, 内容为:

     
    <?php
     
    header("Access-Control-Allow-Origin: http://localhost:9999");
     
    header('Access-Control-Allow-Credentials:true');
     
    $value = "something with cookie";
     
    setcookie("testcookie", $value, time() + 3600);
     
    echo "cookie has seted";

注意: Access-Control-Allow-Origin必须制定特定的URL,不能是*, 且需要加上Access-Control-Allow-Credentials

第二步: 编写请求测试代码

在桌面上新建一个test.html文件,内容为:

     
    <!DOCTYPE html>
     
    <html lang="en">
     
    <head>
     
    <meta charset="UTF-8">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     
    <title>Document</title>
     
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     
    </head>
     
    <body>
     
    <script>
     
    $.ajax({
     
    url: "http://localhost:9000/",
     
    type: 'GET',
     
    success: function(data) {
     
    console.log(data)
     
    },
     
    error: function(err) {
     
    console.error(err)
     
    }
     
    })
     
    </script>
     
    </body>
     
    </html>

    在desktop目录下起一个服务器,用php -S localhost:9999开启一个本地服务器
    第三步: 测试
    1.在浏览器中访问localhost:9999/test.html,打开调试工具->application->cookie可以看到cookie设置成功。
    2.打开调试工具->netwoek,刷新一下,可以看到一个localhost请求,检查这个localhost请求的Request Headers,发现没有cookie这个头部,说明不同源的请求时不会带上cookie的(即使有CORS)
    3.把test.html放到demo文件夹下,在访问localhost:9000/test.html,查看Request Headers,会发现cookie头部, 说明同源请求自动带上了cookie
    4.把test.html的内容更改为以下内容,请求时会有cookie头部。说明withCredentials起作用了

     
    <!DOCTYPE html>
     
    <html lang="en">
     
    <head>
     
    <meta charset="UTF-8">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     
    <title>Document</title>
     
    <script src="jquery-2.2.4.min.js"></script>
     
    </head>
     
    <body>
     
    <script>
     
    $.ajax({
     
    url: "http://localhost:9000",
     
    type: 'GET',
     
    xhrFields: {
     
    withCredentials: true // 这里设置了withCredentials
     
    },
     
    success: function(data) {
     
    console.log(data)
     
    },
     
    error: function(err) {
     
    console.error(err)
     
    }
     
    })
     
    </script>
     
    </body>
     
    </html>

参考:https://zhuanlan.zhihu.com/p/28818954
https://www.zhihu.com/question/25427931
同源策略
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
https://stackoverflow.com/questions/2870371/why-is-jquerys-ajax-method-not-sending-my-session-cookie
服务器也可以在设置Cookie的时候,指定Cookie的所属域名为一级域名,比如.example.com。

Set-Cookie: key=value; domain=.example.com; path=/
这样的话,二级域名和三级域名不用做任何设置,都可以读取这个Cookie。

同源策略是浏览器最核心也最基本的安全功能首先:web是开放的世界, 需要互联链接. 你的网站, 可以使用别人的图片, img, 使用别人 script 做统计, 做广告联盟

假设没有同源, 互联网世界是什么样?链接跳转导致的问题. http://a.com , 放一个链接到 icbc.com, 然后 window.open来打开, 获取窗口句柄, 然后可以拥有对这个页面完全的控制权. 拦截表单,捕获数据,将账号密码上传到a.com.ajax请求, 要啥就有啥. 你登录jd.com; 然后打开a.com, 通过ajax 请求http://jd.com 的用户信息接口, 这时候因为访问的jd.com,所以浏览器自动带上了jd的cookie,然后获取到你的订单list ,昵称, 所有私密信息.所以,需要要同源策略

在同一个域内,客户端脚本可以任意读写同源内的资源,dom,cookie;但是不同的域,就不行.

clq  2020-01-17 13:44:56 发表 编辑

https://blog.csdn.net/weixin_37615202/article/details/88892441

http、ajax请求中如何携带cookie
原创 Awen_liang1002 最后发布于2019-03-29 14:53:31 阅读数 916 收藏
展开

前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie的,而cors跨域请求和fetch请求默认是不携带cookie的。因此,当我们的请求需要携带cookie时,我们就要对cors跨域请求和fetch请求这两中请求方式进行特殊配置处理。对于做移动端的童鞋来说,要是能把项目运行在PC端中最好不过,对于调试过程中的BUG一目了然,所以做特殊处理后更有利于我们在PC端进行调试。
fetch请求方式:

    fetch('/community/getCommunityActivityByCommunityId', {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        credentials: 'include',
        body:"communityId="+this.props.location.query.communityId
    })
        .then((res) => { return res.json(); })
        .then((data) => {
           //请求成功
        })
        .catch((e) => {
    //报错
        });

我们要在请求头中添加上这个配置:credentials: 'include'
cors跨域请求方式:

    $.ajax({
        type: "post",
        url:"/activity/queryPrizeRecord",
        dataType: "json",
       xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        data:{},
        success:function(data){
     
        },
        error:function(e){
        }
    })

我们要在请求头中添加上这个配置:xhrFields: { withCredentials: true }, crossDomain: true
node如何使用呢?

    var http = require('http');
     
    function nodePostGetRequest(HOST, PORT, method, bodydata, callBackFunction, path, cookie) {
        //把将要发送的body转换为json格式
     var body = bodydata;
     var bodyString = JSON.stringify(body);
        //http 头部
     var headers = {
    'Content-Type': 'application/json',
    'Content-Length': bodyString.length,
    'Cookie': cookie
     };
     
    //用与发送的参数类型
    var options = {
    host: HOST,    //ip
    port: PORT,     //port
    path: path,     //get方式使用的地址
    method: method, //get方式或post方式
    headers: headers
       };
       var req = http.request(options, function(res) {
    res.setEncoding('utf-8');
     
    var responseString = '';
     
    res.on('data', function(data) {
        responseString += data;
    });
     
    res.on('end', function() {
        //这里接收的参数是字符串形式,需要格式化成json格式使用
        var resultObject = JSON.parse(responseString);
        console.log('-----resBody-----', resultObject);
        callBackFunction(responseString);
    });
     
    req.on('error', function(e) {
        // TODO: handle error.
        console.log('-----error-------', e);
    });
     });
     req.write(bodyString);
    req.end();
    }

使用案例

        var datapost = {
        "BODY": {
            "Header": {
     
            },
            "Body": {
     
            }
        }
    };
    nodePostGetRequest(HOST, PORT, "POST", datapost, detalCall, '', mycookie);
     
    或
     
     var path = "";
    nodePostGetRequest(HOST, PORT, "GET", "", dealCallback, path, mycookie);



总数:2 页次:1/1 首页 尾页  
总数:2 页次:1/1 首页 尾页  


所在合集/目录
js常用 更多
跨域 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1