17. 解释 Same-Origin Policy

Same-Origin Policy 同源政策

浏览器基於安全性的考量，在应用fetch API或是XHR(XMLHttpRequest)请求资源时，必须遵守 同源政策(Same-Origin Policy) 。

只有网站与呼叫的API同源时，才能成功存取资源，而不受限制。

相反地，如果网站与呼叫的API非同源，即使成功送出了request，浏览器也收到了response，浏览器会因为同源政策，拒绝将资源回传给javaScript。

Same-Origin 同源

同源基本上得遵守三个条件：

1. protocol 通讯协定相同－如http和https是两种协定，所以为非同源。
2. port 埠号相同 - HTTP的预设埠号是 80; HTTPS 的预设埠号是 443。
3. domain 网域/主机位置相同

只要有一个不同都是非同源，比较以下的例子：

原网址
https://ithelp.ithome.com.tw/questions

比较
https://ithelp.ithome.com.tw/questions?tab=hot → 同源 (O)
http://ithelp.ithome.com.tw/questions → 协定不同，非同源 (X)
https://ithelp.ithome.com.tw:8080/questions → 埠号不同，非同源 (X)
https://cannothelp.ithome.com.tw/questions → 网域不同，非同源 (X)

Cross-origin network access 跨来源存取

非同源的请求就是进行跨来源存取，基於同源政策，浏览器不允许这样的行为。

但我们还是得仰赖许多非同源的API，(实际上前几天的范例也用了很多。)

这时可以使用 CORS(跨来源资源共用，Cross-Origin Resource Sharing) 标头，就能让浏览器允许跨来源存取的情况。

CORS

在同源政策下，藉由server在response里加入Access-Control-Allow-Origin这个header，浏览器就会读取这些资讯，让程序接收到response。

网路应用程序所使用的 API 除非使用 CORS 标头，否则只能请求与应用程序相同网域的 HTTP 资源。
跨来源资源共用（Cross-Origin Resource Sharing，简称 CORS）机制提供了网页服务器跨网域的存取控制，增加跨网域资料传输的安全性。

如果想要深入了解很推荐这两篇文章：

• 轻松理解 Ajax 与跨来源请求 → 概念很完整，包含整个非同步请求的架构。

• [教学] CORS 是什麽? 如何设定 CORS? | Shubo 的程序教学笔记→ 详细说明CORS的使用方法

【如内文有误还请不吝指教>< 谢谢阅览至此的各位:D】

参考资料：

• 同源政策 (Same-origin policy) - Web 安全 | MDN
• 轻松理解 Ajax 与跨来源请求
• [教学] CORS 是什麽? 如何设定 CORS? | Shubo 的程序教学笔记

-----正文结束-----

今天的题目好像不是那麽常见，但没概念的话，接API会很难debug，所以还是帮自己简单整理了一下。
明天写JSOP。