Day 09 CORS 跨来源资源共用

阿修的说文解字

何谓 CORS?

MDN 大大表示：

CORS(Cross-Origin Resource Sharing) 是一种使用额外 HTTP 标头令目前浏览网站的使用者代理 (en-US)取得存取其他来源（网域）服务器特定资源权限的机制。当使用者代理请求一个不是目前文件来源——例如来自於不同网域（domain）、通讯协定（protocol）或通讯埠（port）的资源时，会建立一个跨来源 HTTP 请求（cross-origin HTTP request）。
基於安全性考量，程序码所发出的跨来源 HTTP 请求会受到限制。例如，XMLHttpRequest 及 Fetch 都遵守同源政策（same-origin policy）。这代表网路应用程序所使用的 API 除非使用 CORS 标头，否则只能请求与应用程序相同网域的 HTTP 资源。

阿修表示：

Cross-Origin 指的是跨来源，Resource Sharing 指的是共享资料。
因为浏览器有一个同源政策，当我用 AJAX 想要取得对方的资料时，对方会检查你的来源，如果不是他允许的就会挡掉。
只要我跟他的网址不是同源的就会被挡下来，无法顺利取得资料。
所谓同源指的是两份网页具备相同协定(protocol)、埠号(port)(如果有指定) 以及主机位置(host)。
但如果对方有开 CORS 权限，我就可以捞的到资料。
可以透过 test-cors.org 来查询对方网址有没有开权限。

范例

假如我有一个网址是 https://ithelp.ithome.com.tw/articles/10265464
该怎麽判断是否同源呢?

同源

• https://ithelp.ithome.com.tw/articles/10267960/draft
  只要前面的网址(https://ithelp.ithome.com.tw) 是相同的，就表示是同源。
  後面的(articles/10267960/draft)是表示路径。

非同源

• http://ithelp.ithome.com.tw/articles/10265464
  因为 https 与 http 的协定不同，所以是非同源。
• http://ithelp.ithome.com.tw:80/articles/10265464
  因为 https 与 http 的埠号不同，所以是非同源，https 预设是443、http 预设是80。
• https://alex.ithome.com.tw/articles/10265464
  因为主机位置不同，一个是 ithelp，一个是 alex，所以是非同源。

为什麽要档我!

主要是因为安全性的问题，如果不档的话，当对方知道你的网址时，对方可以写一段 AJAX 直接取得你网站的机密资料。
像是直接取得你的聊天纪录或是 email 信件，这样太危险。

参考：
[1]CORS 完全手册（一）：为什麽会发生 CORS 错误？
[2]MDN:同源政策 (Same-origin policy)
[3]MDN:跨来源资源共用（CORS）