angular + nodejs + CORS 实现跨域不丢失cookie做法

更新日期: 2019-03-28阅读: 2.8k标签: cookie

需要解决的问题

  • angular的4200端口 向 nodejs的8080端口 发送一个post请求, 这会造成跨域问题,

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制,只有协议,域名,端口完全相同了才算同一个域,不同域之间不允许通信


CORS 解决跨域问题

jsonp 是一种解决方案, 但是 CORS 更优雅

CORS 跨域资源共享(Cross-Origin Resource Sharing)
了解原理请移步 http://www.ruanyifeng.com/blo...

这里只讲做法

nodejs 后端代码

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});

解决一般的跨域,就这样写就够了

默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等),通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。

后端收到这种请求的时候, 不会检测 cookie 里面的数据

没了 cookie session 自然也就无效了

如果你的请求需要使用到 cookie

前端angular需要这样写


// {withCredentials: true} withCredentials 表示是否传递凭证,就是cookie
this.http.get<any>(this.hostName + "/captcha", {withCredentials: true}).subscribe((data) => {
  
});
  

后端也需要返回 cookie

res.header('Access-Control-Allow-Credentials', true);// Allow Cookie

app.use((req, res, next) => {
    // req.headers.origin
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Credentials', true);// Allow Cookie
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});


这样写会报错, 因为有 cookie 的话, Access-Control-Allow-Origin 就不能写 "*" 了

可以把 Access-Control-Allow-Origin 改成 访问者的ip+端口, 如:
res.header("Access-Control-Allow-Origin", "http://localhost:4200");

但是, 访问者是动态的, 怎么知道访问者的ip, req.headers.origin 就是访问者的ip和端口

最终写法

app.use((req, res, next) => {
    // 需要使用cookie的话,是不能写 * 的,必须写具体的域, 像这样
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header('Access-Control-Allow-Credentials', true);// Allow Cookie
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

链接: https://fly63.com/article/detial/2567

js实现cookie有效期至当次日凌晨

实际开发中有要求用户一些行为每天一次,次日开始重新回复功能,一般前端都是通过cookie来记住用户的操作,然后进行判断当日是否还有机会,这时候需要给存储的cookie值一个有效期,让次日自动失效,重新计数,代码如下:

你真的了解 Cookie 和 Session 吗?

我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等。

关于cookie domain中的点前缀

浏览器已经接收指令,之前在一级域名下存储了相关的信息。这里为了简化问题,假设我们有两个应用A和B,域名分别为:a.b.com和c.a.b.com。(显然B是A的一个子域)。

jquery之cookie操作_jquery.cookie.js

定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js

JS中设置cookie,读取cookie,删除cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie 是为了解决“如何记住用户信息”而发明的:若要想修改某个cookie,只需要用此种方法

使用vue-cookies处理cookie

创建:this.$配置时候设置的名称.set(\\\'cookies的key\\\',value),获取指定的key:this.$配置时候设置的名称.get(\\\'cookies的key`),获取所有keys返回为数组的形式:this.$配置时候设置的名称.keys (\\\'cookies的key`)

使用js实现对cookie的增删改查

存储cookie(key为test;value为testValue);而在cookie的名中我们可以控制,但要保存的值是不确定的,怎么办呢?这时就需要用escape()函数进行编码,它能将一些特殊符号使用十六进制表示

Js操作Cookie

Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。

Js cookie工具函数封装

CookieUtil.get() 方法根据 cookie 的名字获取相应的值。它会在 document.cookie 字符串中查找 cookie 名加上等于号的位置。如果找到了,那么使用 indexOf() 查找该位置之后的第一个分号(表示了该 cookie 的结束位置)。如果没有找到分号

使用vue-cookies操作cookie

在vue中如果想要操作cookie,除了使用之前我们自己封装好的操作cookie的方法之外,我们还可以使用vue-cookies插件,这是一个简单的Vue.js插件,专门用于在vue中处理浏览器的cookie操作

点击更多...

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