Ajax请求如何带上Cookie

0 403 2021-05-23 20:00:02

本文目录

1. 有歧义的表述
2. 无歧义的表述
3. 实验
4. 同源策略

cookie是网站开发过程中最常使用的元素了，合理并优质的使用cookie，可以让我们的网站体验大大提升。但关于ajax与cookie的关系，很多人都存在误解。

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>
<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>
<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；但是不同的域，就不行

本文地址：https://xzo.com.cn/develop/js/979.html

有帮助，很赞！

信息来源：Jxinx

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

ajax

JS控制输入字数的两个方案 JS判断苹果iPhone与iPad、安卓设备类型适配 jQuery动态生成字母头像 JS监听addEventListener无效Cannot read property addEventListener of null是什么原因 jQuery递归函数ajax请求过多导致被服务器封禁了怎么办？ JS代码解除网页右键限制帝国CMS内容页怎样用js实现点击改变字号大小？当缓存文件大于4KB，不能用cookie时的替代方案就是session jQuery/JS 360度旋转轮播插件下载 js手机端浏览pc端页面自动跳转手机站的方法 Ajax请求如何带上Cookie textarea带换行存入mysql数据库的方案（php/js） JQuery判断图片是否有alt属性，没有则自动添加帝国cms异步加载ajax的简单demo 帝国cms页面载入提交ajax异步加载数据（基于jQuery） js解除页面无法复制的问题给网站加一个复制提示窗口JS代码帝国cms选择外表关联字段去除唯一数据改为追加 JS判断当前页是否是微信浏览器打开代码与引导页淘宝电话手机号归属地API查询接口

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。