目录
2.1res.header('Access-Control-Allow-Origin', '*')表示任意域名都可访问
2.3Access-Control-Allow-Methods :设置允许请求的方法
2.4Access-Control-Allow-Headers:设置允许的请求头方式
2.5Access-Control-Expose-Headers 允许客户端获取的头部key
2.6.3Access-Control-Max-Age指定本次预检请求的有效期
1.主题及目标
主题:
- CORS解决跨域
- 后端代理原理
- 利用koa-server-http-proxy中间件实现代理
- 前后分离开发
- 新闻管理添加案例
目标:
- 会使用CORS解决跨域问题
- 了解后端代理
- 会使用koa-server-http-proxy中间件实现代理
- 了解前后端分离工作场景
2.CORS跨域设置
CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器的同源策略
简单来说就是解决跨域问题的除了jsonp外的另一种方法;比jsonp更加优雅。
2.1res.header('Access-Control-Allow-Origin', '*')表示任意域名都可访问
('Access-Control-Allow-Origin', '*') 表示任意域名都可以访问,默认不能携带cookie了。(必须字段)
res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //这样写,只有www.baidu.com 可以访问。
2.2ctx.set("Access-Control-Allow-Credentials",true)允许携带cookie
Access-Control-Allow-Credentials:布尔值 true允许携带cookie;(可选字段)
客户端设置允许携带用户凭证:
//客户端设置允许携带用户凭证
xhr.withCredentials = true;
服务端设置允许携带cookie凭证:
//服务端设置允许携带cookie
ctx.set("Access-Control-Allow-Credentials",true);
2.3Access-Control-Allow-Methods :设置允许请求的方法
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
2.4Access-Control-Allow-Headers:设置允许的请求头方式
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
2.5Access-Control-Expose-Headers 允许客户端获取的头部key
CORS请求时,XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers
里面指定。
('Access-Control-Expose-Headers','Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild')
2.6预检请求
2.6.1简单的请求直接发送
GET
HEAD
POST
content-type
text/plain
multipart/form-data
application/x-www-form-urlencoded
2.6.2简单的请求直接发送
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
2.6.3Access-Control-Max-Age指定本次预检请求的有效期
Access-Control-Max-Age用来指定本次预检请求的有效期,单位为秒,在此期间不用发出另一条预检请求。(预检请求)
发送预检请求
3.后端代理
- 跨域是浏览器规范,通过同服务器请求数据,不通过浏览器请求,也能解决浏览器限制;
- 转发请求
- 利用http模块实现简单的服务器转发
- 利用 koa-server-http-proxy中间件实现代理
app.use(koaServerHttpProxy('/api', {
target: 'http://localhost:4000',
pathRewrite: { '^/api': '' }
}))
4.通过代理实现前后端分离的案例
通过koa-server-http-proxy在koa中实现新闻后台添加功能;
5.总结
- CORS解决跨域
- 预检请求
- 后端代理原理
- 利用koa-server-http-proxy中间件实现代理
- 前后端分离开发