一个比较扯淡的跨域问题

2018-08-27更新: 使用cookie前强烈建议先看下MDN的这篇基础文章 创建cookie可以配置的选项 Expires,Secure,HttpOnly,Domain,Path,SameSite。 为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。

最近在开发一个前后台分离的项目。 前台是 localhost:8080,基于vue,请求用的axios库,后台是地址 localhsot:8111,使用的是NodeJS。 也就是前台发起的请求是跨域的。 现在流程是这样的: 前台向后台请求接口,后台会看到set-cookie,可是我发现前端JS 怎么也拿不到 cookie(后来发现是cookie被设置了HttpOnly)。axios的response里没有。但是在chrome里可以看到设置的cookie。 查了文档,当需要跨域请求,前台需要设置 withCredentials 为 true。 这样每次请求会自动带上 cookie,但是后台也需要设置 Access-Control-Allow-Credentials: true, 就不能用*来设置Origin了,即 Access-Control-Allow-Origin:* , 而应该相应的改成Access-Control-Allow-Origin: localhost:8080, 这样就比较尴尬了,到时候前台是对大众开放,需要允许所有来源,难道没有别的办法了?相信标准这么做也是为了安全。 查了也有解决办法。都还没有尝试。 比如

  1. 可以在nginx中设置,对于过来的请求,让 nginx 自动加上请求头。下面的方法没试,不是嫌麻烦,是部署的工作不是自己的人来做。
if ($http_origin ~* ( https?://.*\.example\.com(:[0-9]+)?$)) {
    add_header Access-Control-Allow-Origin: $http_origin;
}
  1. 对于后端,比如express。每个请求都走一遍中间件, 取出 headers 里的域名, 写到 CORS 头部去:
app = express()

app.all('/*', (req, res, next) => {
  if (req.headers.origin) {
    res.header("Access-Control-Allow-Origin", req.headers.origin)
    res.header("Access-Control-Allow-Credentials", true)
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
    # 下面一行意义不明确...
    res.header("Access-Control-Allow-Headers", "X-Requested-With, AUTHORIZATION")
  }
  next(); // pass control to the next handler
});
next()

其实使用cookie做前后端分离真的没有 token 或 jwt 好用。机密的信息不要放到cookie中比较好。

==== 更新 使用下面的方法在本地可行

if (process.env.NODE_ENV == 'local') {
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Credentials", true);
        res.header("Access-Control-Allow-Origin", req.headers.origin);
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });
}else {
    app.use(cors());
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

python升级后带来的几个小问题

1)python升级带来的yum异常:File "/usr/bin/yum", line 30 原因:这是因为yum采用Python作为命令解释器,这可以从/...

2435
来自专栏风中追风

一次URL输入域名按下回车到底发生了什么?

1、 浏览器的url输入栏发起一个请求,浏览器首先会看自己缓存中有没有对应的ip地址,如果有的话

3566
来自专栏coding

bash基础特征

1042
来自专栏草根专栏

asp.net core 2.0 web api + Identity Server 4 + angular 5 可运行前后台源码

使用Identity Server 4建立Authorization Server:

68518
来自专栏友弟技术工作室

beego配置

beego 目前支持 INI、XML、JSON、YAML 格式的配置文件解析,但是默认采用了 INI 格式解析,用户可以通过简单的配置就可以获得很大的灵活性。 ...

5677
来自专栏Java帮帮-微信公众号-技术文章全总结

同一Tomcat不同项目如何实现session共享【面试+工作】

1724
来自专栏超然的博客

JSONP && CORS

  前天面试被问到了跨域的问题,自我感觉回答的并不理想,下面我就分享一下整理后的总结分享给大家

1792
来自专栏Janti

Http学习笔记

   在HTTP工作开始前,浏览器首先要通过网络与服务器建立连接,该连接是通过TCP来完成的。HTTP是比TCP更高层次的应用层协议,根据规则,只有底层协议建立...

1102
来自专栏Python

flask_socket_io中报错RuntimeError: You need to use the eventlet server. See the Deployment section of t

经测试发现,如果是用uwsgi启动,采用eventlet模式,process只能设置1个,且会造成线程堵塞,如果设置超过1个,也会报上面的错误

2343
来自专栏Java后端生活

JavaWeb(九)Cookie

1897

扫码关注云+社区