前后端跨域请求处理以及携带cookie CORS实现(koa2)

首先,一个较大的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(注意:设为true时,Access-Control-Allow-Origin不能为'*')

这时候前端能够访问后段并且携带cookie。 复杂请求是前端会先发送option 请求,获取后段接受的方法、请求头等信息。然后如果成功会返回204。再继续发送请求。如果还有问题,可能是其他字端出错。具体需要看前端报错内容并且设置对应的响应头。


项目实现跨域代码。

前端:

后端:有现成的中间件可以直接使用


const cors = require('koa-cors')




阅读更多
个人分类: FE node
上一篇React 项目搭建及目录结构
下一篇ant-design表单处理和常用方法及自定义验证
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭