# 什麼是 Ajax？、CORS
AJAX 代表 Asynchronous JavaScript And XML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 `XMLHttpRequest` 物件來與伺服器進行溝通。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 的特點是「非同步」，它可以不須重整網頁就可以更新頁面。
## 用 AJAX 與我們用表單送出資料的差別在哪？
利用表單的方式發送資料，在瀏覽器接收到 response 之後，就會馬上渲染出結果，與 AJAX 最明顯的差別就是使用 AJAX 不用換頁，而且在傳送資料的同時還可以進行其它操作。

## JSONP 是什麼？
基於安全性的考量，瀏覽器中有「同源政策（Same Origin Policy）」的規範，如果並非處於同個網域之下，瀏覽器就不會將返回的 response 給客戶端，而 `<script>` 標籤不在同源政策的管制範圍，伺服器可
呼叫一個函式並將資料作為參數，客戶端在宣告一個同名函式即可拿到想要的資料，不過由於 JSONP 是繞過瀏覽器的安全機制，所以如果伺服器端的程式碼被惡意修改，那客戶端引入的程式碼也會受影響。
## 要如何存取跨網域的 API？
如果不使用像 JSONP 的方法，想要在瀏覽器上存取跨網域的 API 可以透過「跨來源資源共享（Cross-Origin Resource Sharing，CORS）」這項規範，伺服器必須在 response header 加上 `Access-Control-Allow-Origin` 設定允許存取的網域，公開的 API 則設為 `*`。

## 為什麼我們在第四週時沒碰到跨網域的問題，這週卻碰到了？
上面提到的「同源政策」和「跨來源資源共享」都是在瀏覽器上才有的規範，第四週是透過 Node.js 交換資料，沒有瀏覽器參與所以沒有跨網域的問題。

---
+ [輕鬆理解 Ajax 與跨來源請求 by Huli](https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/)
---
CORS
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS

前端網址: http://localhost:3000
後端網址: http://localhost:3001

Cross-Origin Resource Sharing

Cross-Origin 跨來源

Origin: 以下三者皆相同，我們才會說是同源，否則就是跨來源

protocol: http, https
domain name: www.example.com, api.example.com
port
http://www.example.com

(1) http://api.example.com (跨)
(2) https://www.example.com (跨)
(3) http://www.example.com:3000 (跨)
(4) http://www.example.com:80 (同)
(5) http://www.example.com/test.html (同)

只要跨來源，就會被瀏覽器阻擋 （事實上，請求還是發得出去，只是瀏覽器沒有得到 Access-Control-Allow-Origin 許可，會在最後一刻攔截資料，而不交給我們。）
但是開放的話要找後端開放 => cors 第三方開發的中間件