首先,一个较大的web项目一般是由前端跟后台两方开发。为了解耦,一般是前端开发页面,后端开发接口然后部署到服务器上。前端使用Ajax访问服务端接口。这时候一般需要一个Restful API 来规定接口格式(接口文档)。而且因为Http协议是无状态的,如果遇到标识用户身份(比如登陆)的需要,需要cookie session来验证。
面对这种跨域需求。我们可以通过cors来实现。具体理论 http://www.ruanyifeng.com/blog/2016/04/cors.html 阮一峰老师这篇博客写的很好。
1. 前端需要xhr.withCredentials = true 来标识传输cookie
2.服务端。
我在本地前端后端同时开发。(因为前端是react,用node.js处理静态资源,需要额外构建。不能支持热更新,所以开发过程中前端后台都使用热更新,缺点是需要跨域。)前端webpack-dev-server http://127.0.0.1:8080 后端node.js http://127.0.0.1:3000
根据同源策略(协议、域名、端口相同),所以直接请求会报错。
服务端配置 Access-Control-Allow-Origin: '*' 或者前端的origin 这样接口能访问。但是不能获得cookie。还需要设置
Access-Control-Allow-Credentials:true 才能获得前端的cookie(

本文介绍了在前后端分离的项目中,如何通过CORS处理跨域请求并携带cookie。重点讲解了前端设置xhr.withCredentials、后端配置Access-Control-Allow-*响应头的方法,以及在开发环境中解决跨域问题的实践,包括前端React项目与Node.js Koa2后端的配合。
最低0.47元/天 解锁文章
3326

被折叠的 条评论
为什么被折叠?



