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

CarterLi 发布于2019-08-23 16:27 / 3280人阅读

摘要：想要做一个的登录需要解决的问题的端口向的端口发送一个请求这会造成跨域问题跨域，指的是浏览器不能执行其他网站的脚本。

想要做一个angular + nodejs 的登录

需要解决的问题

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(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();
});

云服务器超融合服务器跨域cookie java跨域cookie共享实现跨域 js实现跨域访问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103050.html

[号外号外]ios系统中应用webview、safari浏览器cors请求跨域不携带cookie问题

摘要：党不必操心此问题一问题描述最近手机升级，在做项目测试时，遇到微信和浏览器跨域情况不携带。直接看问题已登录，其他请求登录超时二解决办法系统设置阻止跨网站跟踪勾掉系统设置阻止跨网站跟踪遇到类似问题的老铁们，看是否可以解决同样的问题。【Android党不必操心此问题】一、问题描述最近手机升级ios11，在做项目测试时，遇到微信webview和safari浏览器cors跨域情况不携带co...

chunquedong 2019-06-25 16:31 评论0 收藏0
HTML5 安全问题解析

摘要：本地安全问题在之前引入了本地这个东西，但是后面被废除了，他的安全点和后台数据库的关注点差不多，就是要防止在数据中混入查询指令。僵尸网络风险中解决了单线程问题，提出了机制，它为提供多线程支持，但是多线程带来了一个非常可怕的危险僵尸网络。 HTML5 安全问题解析标签： html html5 web安全本文参考： w3school:html5相关基础知识（w3school.com.c...

Lowky 2019-08-02 18:19 评论0 收藏0
HTML5 安全问题解析

摘要：本地安全问题在之前引入了本地这个东西，但是后面被废除了，他的安全点和后台数据库的关注点差不多，就是要防止在数据中混入查询指令。僵尸网络风险中解决了单线程问题，提出了机制，它为提供多线程支持，但是多线程带来了一个非常可怕的危险僵尸网络。 HTML5 安全问题解析标签： html html5 web安全本文参考： w3school:html5相关基础知识（w3school.com.c...

maybe_009 2019-08-01 14:51 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
同源策略与跨域

摘要：简单地理解就是因为同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，域名下的无法操作或是域名下的对象。同源策略会限制以下三种行为和无法读取。例如中可以引用等资源，此类操作不受同源策略限制。同源策略同源策略same origin policy中的重要内容就是URL（uniform resource locator）,统一资源定位符，俗称网址。URL中的resource资源就...

xavier 2019-08-26 12:09 评论0 收藏0