在前后端分离的项目中,ajax跨域请求怎样附带cookie

更新日期: 2018-09-12阅读: 2466标签: 存储

在项目的实际开发中,我们总会遇到前后端分离的项目,在这样的项目中,跨域是第一个要解决的问题,除此之外,保存用户信息也是很重要的,然而,在后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢,通过查阅资料,我这里以angularJS的$http中的ajax请求来举例子。

首先,在后台我使用的servlet的filter拦截所有的请求,并设置请求头:

// 解决跨越问题  

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,SessionToken");


// 允许跨域请求中携带cookie
 response.setHeader("Access-Control-Allow-Credentials", "true");


代码的上面部分是解决跨域问题的代码,而第二部分的response.setHeader("Access-Control-Allow-Credentials", "true");这是允许在后端中允许携带cookie的代码。

前端代码:

$scope.login = function () {
    $http({
        // 设置请求可以携带cookie
        withCredentials:true,
        method: 'post',
        params: $scope.user,
        url: 'http://localhost:8080/user/login'
    }).then(function (res) {
        alert(res.data.msg);
    }, function (res) {
        if (res.data.msg) {
            alert(res.data.msg);
        } else {
            alert('网络或设置错误');
        }
    })
}


从以上代码,我们不难知道,在跨域请求中在前端最重要的一点在于withCredentials:true,这一语句结合后台设置的"Access-Control-Allow-Credentials", "true"就可以在跨域的ajax请求中携带cookie了。

然而,在我测试的时候发现了一些问题,当请求发出时,浏览器就报错如下

Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'null' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.


通过查阅相关资料,这才发现,原因是在后台解决跨域代码的response.setHeader("Access-Control-Allow-Origin", "*");这部分和设置跨域携带cookie部分产生了冲突,在查阅相关资料我发现设置跨域ajax请求携带cookie的情况下,必须指定Access-Control-Allow-Origin,意思就是它的值不能为*,然而想到前后端分离的情况下前端ip是变化的,感觉又回到了原点,难道就不能用这个方法来解决ajax跨域并携带cookie这个难题?


接下来,在对我发出的ajax请求的研究中,我发现,在angularJS中,每一个请求中的Origin请求头的值都为"null",这意味着什么?于是我把后台"Access-Control-Allow-Origin", "*"改成了"Access-Control-Allow-Origin", "null",接下来的事情就变得美好了,所有的ajax请求能成功的附带cookie,成功的达到了目的。

response.setHeader("Access-Control-Allow-Origin", "null");


链接: https://www.fly63.com/article/detial/1073

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

前端数据保存_使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

HTML5中的storage 如何使用

HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!