鐵人賽 Day 17

Same-Origin Policy(同源政策)

是ㄧ種瀏覽器上的安全機制，用來防止惡意網站在瀏覽器上執行 JS 或是防止其他惡意攻擊者發送 request 直接拿到個人隱私的資料。

什麼是同源？

網址必須要是相同 protocol、host、port。

以 https://sheng8787.tw 為例

• https://sheng8787.tw/index.html 和 https://sheng8787.tw 同源
• https://sheng8787.tw 和 http://sheng8787.tw 不同源，因為使用不同 protocol
• https://sheng8787.chill.tw 和 https://sheng8787.tw 不同源 domain 和 subdomain不同源
• https://sheng8787.cool.tw 和 https://sheng8787.chill.tw 不同， host 不一樣
• https://sheng8787.tw:3000 和 https://sheng8787.tw 不同源，port 不一樣

跨源資源共用（CORS）

What is CORS ?
是一種使用額外 HTTP Header 令目前瀏覽網站取得存取其他來源（網域）伺服器特定資源權限的機制，當使用者請求一個不是和目前網站相同來源的請求時，會建立一個跨來源 HTTP 請求（cross-origin HTTP request）。

常見的 CORS 錯誤

常見的錯誤是在 AJAX 向後端發送 request 的時候，那應該要怎麼解決呢？
大部分情形下，CORS 都不是前端的問題，純前端是解決不了的。
最直接有效的辦法就是請後端加上CORS header，這個 header 的名稱叫做 Access-Control-Allow-Origin，內容就是你想要放行的 origin，例如說：Access-Control-Allow-Origin: http://localhost:3000，
直白說就是從這個網域發送的 request 是可以信任的。

fetch

瀏覽器提供 Fetch API 來發送 request 和接收 response

範例1

fetch() 有兩個參數，第一個是 url 第二個是可傳入一個物件

fetch("http://example.com/movies.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });
 

範例2

function postData(url, data) {
  return fetch(url, {
    body: JSON.stringify(data), 
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
      "content-type": "application/json",
    },
    method: "POST", 
    mode: "cors", 
  }).then((response) => response.json()); // 輸出成 json
}