[Week8] - 前端串 API


Posted by Kayla on 2020-12-19

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:

  1. new XMLHttpRequest() 宣告一個 XHR 的物件
    Note:MDN - 使用 XMLHttpRequest

  2. request.open()設定請求
    參數格式 (Mathod - get/post/PUT/DELETE/HEAD/OPTIONS)',url,true(同步)/false(非同步))request.open(method, url[, async[, user[, password]) `

  3. request.onload()監聽事件
    確定有資料回傳回應完成時 去執行相對應的函式

  4. 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 請求就不會送出。

JSONP(JSON with padding)

單向傳送資料

除了 CORS,跨來源請求的另外一種方法,利用<script>裡面放資料,透過指定的 function 把資料給帶回去。  

實務上操作 JSONP 的時候,Server 通常會提供一個callback的參數讓 client 端帶過去。  

JSONP 缺點:要帶的那些參數永遠都只能用附加在網址上的方式(GET)帶,沒辦法用 POST。
Note:不受同源政策管理的標籤 - <script> 引入其他 domain 的 JavaScript/<img>載入圖片沒有安全性問題。

輕鬆理解 Ajax 與跨來源請求

JavaScript 發送 HTTP 請求

學習使用XMLHttpRequest

用 JSONP 跨域 GET 簡易示範 & 說明

tags: 程式導師實驗計畫第四期 [FE102] Week8









Related Posts

1. Design Pattern

1. Design Pattern

【文件筆記】Redux 官方文件

【文件筆記】Redux 官方文件

Chrome 83 DevTools 新功能:切換 location 與 locales

Chrome 83 DevTools 新功能:切換 location 與 locales


Comments