前后端交互二（CORS解决跨域，后端代理原理，利用koa-server-http-proxy中间件实现代理，前后分离开发，新闻管理添加案例 ）

目录

 

1.主题及目标

2.CORS跨域设置

2.1res.header('Access-Control-Allow-Origin', '*')表示任意域名都可访问

2.2ctx.set("Access-Control-Allow-Credentials",true)允许携带cookie

2.3Access-Control-Allow-Methods ：设置允许请求的方法

2.4Access-Control-Allow-Headers：设置允许的请求头方式

2.5Access-Control-Expose-Headers 允许客户端获取的头部key

2.6预检请求

2.6.1简单的请求直接发送

2.6.2简单的请求直接发送

2.6.3Access-Control-Max-Age指定本次预检请求的有效期

3.后端代理

4.通过代理实现前后端分离的案例

5.总结

---

1.主题及目标

主题：

1. CORS解决跨域
2. 后端代理原理
3. 利用koa-server-http-proxy中间件实现代理
4. 前后分离开发
5. 新闻管理添加案例

目标：

• 会使用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.总结

1. CORS解决跨域
2. 预检请求
3. 后端代理原理
4. 利用koa-server-http-proxy中间件实现代理
5. 前后端分离开发