关于使用CORS时遇到的一些坑

最新推荐文章于 2023-11-20 15:52:29 发布

ChongjinChen

最新推荐文章于 2023-11-20 15:52:29 发布

阅读量958

点赞数

分类专栏： NodeJs 文章标签： NodeJs JavaScript Cors

本文链接：https://blog.youkuaiyun.com/weixin_44156420/article/details/88729040

版权

NodeJs 专栏收录该内容

2 篇文章

订阅专栏

最近在写个人博客的时候，打算用session去保持登录态。但是在使用的时候，发现请求中没有cookie。后来查了一下，是跨域的问题（用了CORS）。
根据同源策略，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源两。而跨域的出现，就是为了解决两个不同源地址之间的通信。其实网页A的请求是已经发出去了的（可以根据开发者工具中的Network看状态码），只不过响应被浏览器给拦截了。
而我单纯的以为用了CORS之后问题就会解决。一运行，报错了?
在这里插入图片描述

网上查了一下，大致的意思，就是我CORS没有配置好，于是在后端加了这么些代码：
在这里插入图片描述

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin",'null');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Credentials","true");
    res.header("Access-Control-Allow-Methods","POST, GET, OPTIONS, PUT, PATCH, DELETES");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

第一个是允许的源，第二个是允许的headers，第三个是允许带Cookie，第四个是允许的请求方式，第五个就不用多说啦
不单单这么简单，设置完了之后，在Request里还要加上：
在这里插入图片描述

	$.ajax({
				...: ...,
	    		withCredentials: true,
				crossDomain: true,
				...: ...
				})

这两条语句，第一条就是携带Cookie，第二条就是跨域啦。这么做了之后，果然就可以通信并且带了Cookie；

如果要带cookie（即设置了withCredentials： true），那么Access-Control-Allow-Origin不能用通配符（‘*’），得用具体的Origin。这个Origin可以在开发者工具中的Network上看到（浏览器在第一次请求其他页面的时候，会发两个请求，第一个是简单请求（method是OPTIONS），里面也会有Origin）：
在这里插入图片描述