Day09【Web】跨来源资源共用 CORS

CORS 全称 Cross-Origin Resource Sharing，
中文为「跨来源资源共用」。

由於现今网路上许多页面所载入的资源，
都来自与所在位置分离的网域，
当使用者代理请求一个非同源的资源时，
基於安全性考量，
会建立一个跨来源 HTTP 请求（cross-origin HTTP request），
以对非同源的资源请求进行限制。

如 XMLHttpRequest 及 Fetch API
都遵守同源政策。
存取跨来源资源时必须使用 CORS 标头，
否则就只能请求与应用程序同源的 HTTP 资源。

同源政策（same-origin policy）

达成同源的三个条件：

• 相同的通讯协定（protocol），即 http / https
• 相同的网域（domain）
• 相同的通讯埠（port）

跨来源请求

当请求的资源非同源时，
会在请求中加入新的 HTTP 标头，
让服务器能够描述来源资讯，
以提供浏览器读取。

针对会造成副作用的 HTTP 请求方法，
规范要求浏览器必须要请求传送
「预检（preflight）」请求。

简单请求 Simple requests

不会触发 CORS 预检的请求类型

仅允许下列 HTTP 方法：

• GET
• HEAD (en-US)
• POST

仅允许下列 Content-Type：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

预检请求 Preflighted request

只要不符合简单请求的条件，
就会进行「预检（preflighted）」请求。

预检会先以 HTTP 的 OPTIONS 方法
送出请求到另一个网域，
确认後续实际（actual）请求是否可安全送出。

由於跨站请求可能会携带使用者资料，
所以要先进行预检请求。
如果预检没有通过，
浏览器就不会发送 Request。

会触发预检的请求方法（简单请求之外的方法）：

• PUT (en-US)
• DELETE (en-US)
• CONNECT
• OPTIONS (en-US)
• TRACE (en-US)
• PATCH (en-US)

参考资料

• 跨来源资源共用（CORS）- MDN
• [教学] CORS 是什麽? 如何设定 CORS?
• [Day 27] Cross-Origin Resource Sharing (CORS)