什么是CORS
跨域资源共享（Cross-Origin Resource Sharing）是一种机制，用来允许不同源服务器上的指定资源可以被特定的Web应用访问。
同源策略
同源是指不同的站点间，域名、端口、协议都相同，浏览器的同源策略（same-origin policy）出于安全原因，会限制浏览器的跨源 HTTP 请求。
哪些情况遵循同源策略
- 由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。
- Web 字体 (CSS 中通过 @font-face 使用跨域字体资源)。
- WebGL 贴图
- 使用 drawImage 将 Images/video 画面绘制到 canvas
为什么需要CORS
Web应用向服务器请求资源时，由于同源策略限制，Web应用程序只能从同一个域请求 HTTP 资源。如果服务器和Web应用不在同一个域，会发起一个跨域 HTTP 请求。
CORS响应头部
当响应报文包含了正确CORS响应头， Web应用程序才能从跨域的服务器加载资源。
- Access-Control-Allow-Origin - 指定了允许访问该资源的外域 URI
- Access-Control-Expose-Headers - 服务器设置允许浏览器访问特定的头
- Access-Control-Max-Age - 指定预请求的结果能够被缓存多久
- Access-Control-Allow-Credentials - 当浏览器的 credentials 设置为true时是否允许浏览器读取 response 的内容
- Access-Control-Allow-Methods - 预检请求的响应，指明实际请求所允许使用的 HTTP 方法
- Access-Control-Allow-Headers - 预检请求的响应，指明实际请求中允许携带的首部字段
Koa-cors
Koa-cors 是基于 node-cors 开发的 Koa CORS中间件。
安装
$ npm install koa-cors --save
使用
var koa = require('koa');
var route = require('koa-route');
var cors = require('koa-cors');
var app = koa();
app.use(cors());
app.use(route.get('/', function() {
this.body = { msg: 'Hello World!' };
}));
app.listen(3000);
配置
具体的配置参考 koa-cors 文档，这里做简单介绍
- origin ：配置 Access-Control-Allow-Origin 头部
- expose ：配置 Access-Control-Expose-Headers 头部
- maxAge ：配置 Access-Control-Max-Age 头部
- credentials ：配置 Access-Control-Allow-Credentials 头部
- methods ：配置 Access-Control-Allow-Methods 头部
- headers ：配置 Access-Control-Allow-Headers 头部
作者：moyufed
链接：https://www.jianshu.com/p/3e5aac6bf8db
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论