串接 API

用 node.js 發 request 跟在瀏覽器上發 request 的差異

用 node.js 發不會被限制，而瀏覽器上發會受到瀏覽器的限制

• node.js 直接發 request 給 server，server 回傳 response 給 node.js，不會有限制
• 瀏覽器上的 js 先發 request 給瀏覽器，再由瀏覽器發 request 給 server，server 回傳 response 給瀏覽器，再由瀏覽器傳回給 瀏覽器上的 js，會被瀏覽器限制

用 form 發送 request

• 用 form 的 method 發一個 request 到 action 的頁面去
• 新的頁面是甚麼就回傳甚麼
• 提交表單後，回傳 response 給瀏覽器，瀏覽器再 render 出新的結果

用 AJAX 發送 request

• Asynchronous JavaScript And XML
• 不會換頁
• 非同步，不用等

// new 一個 XHR
const request = new XMLHttpRequest()

// request 拿到結果觸發 onload 事件，執行後面的 function 
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
  console.log(request.responseText)
  } else {
  console.log('err')
  }
}

// request 觸發 onerror 事件
request.onerror = function() {
  console.log('error')
}

// 用 GET 發 request 到後面那個網址，true 代表要非同步
request.open('GET', 'http://google.com', true)

// 把 request 傳出去
request.send()

1. new 一個 XHR 出來，用一個變數(request)接起來
2. 幫 request 加上一個 onload 事件，當 onload 時執行 function
3. 根據 status 判斷 response，如果是好的就 log 出 responseText
4. 幫 request 加上一個 onerror 事件，當觸發 onerror 就 log 出 error
5. .open(method, 網址, true) 指定 method，request 要傳到網址，要使用非同步
6. .send() 發出 reqeust

Same Origin Policy 同源政策

瀏覽器的一個政策，拿資料時如果是不同源(domain 不同)的話，預設會幫你擋掉
同源：相同協定、相同 port、相同主機

CORS 跨來源資源共用

Cross-Origin Resourse Sharing
如果需要跨來源，Server 端就要在 response 的 header 加上 Access-Control-Allow-Origin，設定哪些來源可以存取到這個 response

Access-Control-Allow-Origin：* 任何來源都可以接受

Preflight Request 預檢請求

用一個 OPTIONS 的請求去確認之後的 resquest 是否能發出去，因為非簡單請求可能帶有使用者資訊，所以先透過預檢請求來確認後續的請求是否要繼續

JSONP

• JSON with padding
• 有些標籤不受同源政策影響，ex. <script src="">、<img src="">，JSONP 利用這樣的特性，可以拿到不同 domain 的資料

利用不受同源政策限制的<img>標籤去追蹤信件是否被打開過