你真的搞懂了什么是CORS了么❓

前言

曾经有一天在公司我和后端一起写一个移动端项目，我这边请求使用的fetch。于是出现了下面的对话

• 后端：接口我已经写好了，部署到服务器上了
• 我：好，我本地请求一下。出现了跨域报错，Access to XMLHttpRequest at....,你把Access-Control-Allow-Origin设置为*, 我本地测试一下
• 后端: 为什么要我这边设置，明明是你那边报错的
• 我：这是一个跨域问题，你把Access-Control-Allow-Origin设置为*，我才可以进行本地请求
• 后端：我这边是不会改的，需要你那边自己解决...
• ....争吵ing，马上就要争急眼了

只可惜当时的我也只是刚干一年的前端，并没有跟他详细的解释出什么会出现这个报错？他为什么要这样修改？ 如果上天再给我一次机会，我一定会吵过他，😄哈哈

什么是CORS？

首先你要跟他解析什么是用于控制跨源资源的浏览器安全机制，也就是CORS(Cross-Origin Resource Sharing)。CORS 在同源策略下，浏览器限制了从一个源加载的网页或脚本如何与来自其他源的资源进行交互。

CORS都干了什么？

允许服务器在Response中包含一个特殊的Header

CORS 允许服务器在Response中包含一个特殊的Header（Access-Control-Allow-Origin），用于指定允许访问该资源的源。这样可以解决跨域请求的限制，允许客户端从其他域或端口请求资源。如果设置为*，则表示允许所有的源进行访问。如果设置为juejin.cn 则表示服务端的资源允许掘金这个源进行访问。

当然除了Access-Control-Allow-Origin外，还有Access-Control-Alloq-Method(允许的方法)，access-control-max-age(允许的有效期)等

预检请求

CORS 支持一些常见的 HTTP 请求方法，如 GET、POST 等。它还支持复杂请求（例如带有自定义标头或使用非简单的方法的请求），需要进行预检请求（OPTIONS 请求）来获取服务器允许的方法和标头。

非简单请求(get,post之外的请求)的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为 预检请求。

需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。预检请求 的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

总结

1. 本文讲述了浏览器安全中控制跨域的机制---CORS
2. 然后讲解了CORS都干了什么，
   • 允许服务器在Response中包含特殊的Header
   • 预检请求。 通过这些来防止xss攻击，csrf攻击

我觉得按照上面这样一堆浅显易懂的知识讲给后端，他总该明白了吧

参考

• # 京东一面：post为什么会发送两次请求？