CORS_就算不同源我们还是可以在一起

web 的朋友们

可能有看过类似这样的报错
No 'Access-Control-Allow-Origin'

这是个关于浏览器跟伺服器的（爱恨情仇？）
其实也就不过是安全上的考量，做了些限制存取或读取的机制。

在此先来讲下同源政策，是确保不要被来路不明者，随意可取用或写入资料，浏览器跟伺服器间彼此会先确认关係，是不是同网域、同协定、同埠号。

同源政策 (Same-origin policy)

相同网域（Domain）相同通讯协定：HTTP、HTTPS、FTP相同连接埠号（Port）

可看看下列哪些 URL 和 http://goodideal.com 同源

但当 Web 接后端 API 往往就是会发生不同源的情形，这时就要靠 CORS 来协助处理这件事了。

CORS Cross-Origin Resource Sharing

跨域资源共享

简单请求

需同时满足两大条件
直接发送 request ，不再额外发送预检 preflighted

---

非简单请求（ 预检 preflighted ）

关键：不符合简单请求的两大条件

发送真正的请求前，会先发送 OPTIONS 请求进行确认
确认成功后真正的请求才会被送出

例如：

---

伺服器 Response Headers

Access-Control-Allow-Origin: http://api.goodideal.com
（ 允许的 Origin，可以使用 * ）Access-Control-Expose-Headers: X-ideal-Debug
（ 允许浏览器存取回应标头的白名单 ）Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
（ 回应预检请求，可用方法 ）Access-Control-Allow-Headers: X-Custom-Header
（ 回应预检请求，所支持的讯息）Access-Control-Allow-Credentials: trueAccess-Control-Max-Age: 66666

---

CORS 流程图

流程图来源：CORS 简单请求+预检请求（彻底理解跨域）

---

参考连结

Same Origin Policy 同源政策 ! 一切安全的基础

同源政策与跨来源资源共用（CORS）

跨域资源共享 CORS 详解

跨来源资源共用（CORS

轻鬆理解 Ajax 与跨来源请求

ajax跨域，这应该是最全的解决方案了

同源政策

CORS 简单请求+预检请求（彻底理解跨域）