Node.js 和瀏覽器上 JS 差異

Node.js
在 Node.js 上，發出 request 不會被限制，直接將 request 傳送到 server 端。
瀏覽器上 JS
透過瀏覽器發出 request，因安全性考量（同源政策、CORS......），所以會受到瀏覽器的規範限制，或是瀏覽器會幫你添加上一些東西，例如瀏覽器的版本。

傳資料的方式

1. form

每次交換資料都會換頁
瀏覽器提供發送 request 的方法之一。

GET 方法：參數被放在 URL 上面
POST 方法：參數放在 request 的 body 中

2. AJAX (非同步 JS 交換資料)

用 AJAX 送出一個 HTTP request:

new XMLHttpRequest() 宣告一個 XHR 的物件
Note：MDN - 使用 XMLHttpRequest
request.open()設定請求
參數格式 (Mathod - get／post/PUT/DELETE/HEAD/OPTIONS)',url,true(同步)/false(非同步))request.open(method, url[, async[, user[, password]) `
request.onload()監聽事件
確定有資料回傳回應完成時去執行相對應的函式
request.send() 送出 request
使用的是 GET 方法，因此設為空值

Note：不一定每個 reponse 都有 responseText

response	使用屬性
text	`responseText`
XML/XHTML	`responseXML`
JSON	`JSON.parse()`

var request = new XMLHttpRequest();
request.open('GET', `https://api.twitch.tv/kraken/games/top?client_id=xxx`, true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    // Success!
    console.log(request.responseText);
  }
};
request.send();

Same origin policy（同源政策） / CORS (跨來源共用)

Same origin policy 同源政策：

意指相同協定、port、domain。
現在所在的網站跟要呼叫的 API 的網站處在「不同源」時，瀏覽器一樣會發 Request，但是會擋下 Response，不讓 JavaScript 拿到資料，並且傳回錯誤訊息。
Note：http, https 不同源。

CORS 跨來源共用：

想開啟跨來源 HTTP 請求的話，Server 需在 response header 中要有 acess-control-allow-origin:* ，* 代表任何一個 Origin 都接受。當瀏覽器接收到 Response 後，比對目前的 Origin 符合*這個規則，才允許接受跨來源請求的回應。

分成兩種 Request:

CORS requests	說明
simple requests(簡單請求)	基本上，只使用 GET、HEAD、POST，且不添加額外的 Header，大部分為 simple requests
Preflight Request(預檢請求)	在非簡單請求中，可能會帶有使用者資料，因此會先透過 Preflight Request 確認後續的請求能否送出。

為什麼要有 Preflight Request?

若沒有 Preflight Request，就可以在隨便一個 Domain 的網頁上發送一個 DELETE 的 Request 給這個 API。雖然 Response 被瀏覽器擋住，我們收不到回覆，但　Server 端還是會收到 Request，並且把這筆資料刪除。

總結目的：
先用一個 OPTIONS 的請求去確認之後的 Request 是否能送出。如果確認這個 API 並沒有提供 CORS，DELETE 請求就不會送出。