字节跳动硬刚后的第三天

预请求与 Options

当一个请求跨域且不是简单请求时就会发起预请求，也就是 Options。如果没有预请求，万一有一个毁灭性的 POST 跨域请求直接执行，虽然最后告知浏览器你没有跨域权限，但是损失已造成，岂不亏大的。

以下条件构成了简单请求：

1. Method: 请求的方法是 GET、POST 及 HEAD
2. Header: 请求头是 Content-Type (有限制)、Accept-Language、Content-Language 等
3. Content-Type: 请求类型是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain非简单请求一般需要开发者主动构造，在项目中常见的 Content-Type: application/json 及 Authorization: 为典型的「非简单请求」。与之有关的三个字段如下：

• Access-Control-Allow-Methods: 请求所允许的方法, 「用于预请求 (preflight request) 中」
• Access-Control-Allow-Headers: 请求所允许的头，「用于预请求 (preflight request) 中」
• Access-Control-Max-Age: 预请求的缓存时间

写一个 CORS Middleware

既然 CORS 原理如此简单，那就拿起键盘写一个简单的 CORS 中间件吧，CORS 大致是设置几个响应头吧

❝关于 cors 的响应头有哪些?[2]❞

「关于 CORS 的设置即是对 CORS 相关响应头的设置，因此了解这些 headers 至关重要。无论对于配置的生产者和消费者，及后端和前端而言，都应该掌握!」

以下是关于 CORS 相关的 response headers 及其释义

• Access-Control-Allow-Origin: 可以把资源共享给那些域名，支持 * 及 特定域名
• Access-Control-Allow-Credentials: 请求是否可以带 cookie
• Access-Control-Allow-Methods: 请求所允许的方法, 「用于预请求 (preflight request) 中」
• Access-Control-Allow-Headers: 请求所允许的头，「用于预请求 (preflight request) 中」
• Access-Control-Expose-Headers: 那些头可以在响应中列出
• Access-Control-Max-Age: 预请求的缓存时间

而关于 CORS 的中间件即是使用默认值与配置来设置这些头，如 koa/cors 需要传递以下参数。

 

Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么是跨域?[1]

跨域，这或许是前端面试中最常碰到的问题了，大概因为跨域问题是浏览器环境中的特有问题，而且随处可见，如同蚊子不仅盯你肉而且处处围着你转让你心烦。「你看，在服务器发起 HTTP 请求就不会有跨域问题的」。

当谈到跨域问题的解决方案时，最流行也最简单的当属 CORS 了。

CORS

CORS 即跨域资源共享 (Cross-Origin Resource Sharing, CORS)。简而言之，就是在服务器端的响应中加入几个标头，使得浏览器能够跨域访问资源。

这个响应头的字段设置就是 Access-Control-Allow-Origin: *以下是最简单的一个 CORS 请求

（编辑：济宁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!