同源政策

DOM的同源政策

JSONP

<link>、<script>、<iframe> 、<video> 等等具跨域能力，透過 GET 請求方式取得資源。

Cross-origin Resource Sharing (CORS) - 跨域資源共享

簡單(Simple)

1. 方法只能是 HEAD、GET、POST。

2. 可用標頭，只能是 Accept、Accept-Language、Content-Language、Last-Event-ID 及Content-Type(application/x-www-form-urlencoded、multipart/form-data、text/plain)。

3. 透過伺服器端 Access-Control-Allow-Origin (ACAO) 控制。

另外可透過 Access-Control-Allow-Credentials，判斷是否發送cookie。

也可透過 Access-Control-Expose-Headers，來決定回應標頭。

待預檢(with Preflight)

1. 瀏覽器可透過 OPTIONS 試探伺服器是否符合，並附上以下資訊：

• Access-Control-Allow-Origin( ACAO , 來源)

• Access-Control-Request-Method / Access-Control-Allow-Methods (請求方法)

• Access-Control-Request-Header / Access-Control-Allow-Headers (標頭)

WebSocket

該協議不實行同源政策，只要服務器支持就可以跨網域連接。

參考資料

https://blog.techbridge.cc/2018/08/18/cors-issue/ https://zhuanlan.zhihu.com/p/38972475 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html