# text-cors 查詢 API 是否有跨網域功能

###### tags: `javascript` `API` `CORS` `XMLHttpRequest` `axios`

## API 種類
1. 可以在瀏覽器端讀取使用，不需申請帳號：[2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
2. 可以在瀏覽器端讀取使用，需要申請帳號獲得金鑰： [Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)
3. 只能在**後端伺服器**讀取，不需申請帳號： [台南旅遊人數](https://data.tainan.gov.tw/dataset/tourists-statis)
4. 只能在**後端伺服器**讀取，需要申請帳號獲得金鑰： [NEWS API](https://newsapi.org/)

> 1.用 [text-cors](https://www.test-cors.org/) 工具，模擬發送跨域請求觀察是否能介接
> 2.瀏覽器端讀取關鍵 header 參數：==Access-Control-Allow-Origin: *==

## [每日任務](https://hackmd.io/8Uos2GP4TVSuxUuQWpu1GQ?view)
### 題目：
* 注意事項
請同學參考[第八週錄影檔 - 上半部](https://courses.hexschool.com/courses/20201113/lectures/36582917)，了解如何測試 API 是否可以使用。
* 重點一. 用 [test-cors](https://www.test-cors.org/) 觀察是否能介接。
==text-cors 是模擬發送跨域請求、觀察是否能介接的工具==
* 重點二. response header 參數：Access-Control-Allow-Origin: *
==是瀏覽器端能否提供讀取的關鍵設定==

* 問題
以下是各個不同的 API 連結，請問以下哪些網址「可以」透過 axios 「在瀏覽器端」讀取使用?
1. 「全球運動場館資訊網」: [網址一](https://iplay.sa.gov.tw/api/GymSearchAllList?$format=application/json;odata.metadata=none&Keyword=%E6%A3%92%E7%90%83%E5%A0%B4%20%E5%9C%8B%E5%B0%8F&City=%E9%AB%98%E9%9B%84%E5%B8%82&GymType=%E6%A3%92%E7%90%83%E5%A0%B4&Latitude=22.6239746&Longitude=120.305267)
2. 「Unsplash」:[網址二](https://api.unsplash.com/photos/?client_id=YOUR_ACCESS_KEY)
3. 「里長資訊網」:[網址三](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)
4. 「中央氣象局開放資料平臺」:[網址四](https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-8C36EA7F-A9E1-4242-9463-66006731040A&format=JSON)
5. 「旅遊人數明細表」 :[網址五](https://culture.tainan.gov.tw/shared/Statistics_Json)

### 解題：
1. 「全球運動場館資訊網」: [網址一](https://iplay.sa.gov.tw/api/GymSearchAllList?$format=application/json;odata.metadata=none&Keyword=%E6%A3%92%E7%90%83%E5%A0%B4%20%E5%9C%8B%E5%B0%8F&City=%E9%AB%98%E9%9B%84%E5%B8%82&GymType=%E6%A3%92%E7%90%83%E5%A0%B4&Latitude=22.6239746&Longitude=120.305267) ==(O)==
XHR status: 200
※ 透過 test-cors 發出 request 再來看，==有參數：Access-Control-Allow-Origin: *==
可以直接把打開檔案的這步驟，當成是一種初步去檢查是否可以取得資源的方式
==但實際發 xhr request 會不會被擋，就是發 xhr 去看才知道。==

1. 「Unsplash」:[網址二](https://api.unsplash.com/photos/?client_id=YOUR_ACCESS_KEY) ==(X)==
XHR status: 401
有參數：Access-Control-Allow-Origin: *
HTTP Status Code: 401 伺服器收到未經身份驗證的請求

1. 「里長資訊網」:[網址三](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON) ==(X)==
Fired XHR event: error
XHR status: 0
沒有參數：Access-Control-Allow-Origin: *
HTTP Status Code: 200

1. 「中央氣象局開放資料平臺」:[網址四](https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-8C36EA7F-A9E1-4242-9463-66006731040A&format=JSON) ==(O)==
XHR status: 200
有參數：Access-Control-Allow-Origin: *
HTTP Status Code: 200

1. 「旅遊人數明細表」 :[網址五](https://culture.tainan.gov.tw/shared/Statistics_Json) ==(X)==
Fired XHR event: error
XHR status: 0
沒有參數：Access-Control-Allow-Origin: *
HTTP Status Code: 200

## 助教補充 [Notion 文件](https://moored-espadrille-379.notion.site/11-29-ad75a273095e4107a8a7ec63233511ef)
### 重點：
* 首先，要了解什麼情況下會使用到 CORS
* 從 MDN 文件[這部分](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS#%E5%93%AA%E4%BA%9B%E8%AB%8B%E6%B1%82%E6%9C%83%E4%BD%BF%E7%94%A8_cors%EF%BC%9F)就有寫到是『使用 XMLHttpRequest 或 Fetch API 進行跨站請求』
* 題目：可以透過 axios 讀取
→ 可以跨域請求（axios 在瀏覽器環境下使用 XMLHttpRequest 請求）
* 從提供的連結 network 直接打開檔案，可以在 network 發現它的 type 是 document 不是 xhr，所以即使沒有 acceess-control-allow-origin 標註，可能是請求此檔案時沒有設定，但不一定是在 xhr 時就無法被跨域請求。
* 同上面文件說的，會使用到 CORS 的話情況是跨站請求，那要比較準確的來看 acceess-control-allow-origin，可以盡量透過 test-cors 發出 request 再來看。
* 簡單來說，可以直接把打開檔案的這步驟，當成是一種初步去檢查是否可以取得資源的方式，但實際發 xhr request 會不會被擋，就是發 xhr 去看才知道。
### QA：
* 同學提問：
> 請問里長資訊網用 text-cors 查詢之後狀態碼是 0,用瀏覽器看狀態碼是 200,但是對里長資訊網來說這兩者的請求(get) 應該是一樣的，為什麼會有不一樣的狀態碼呢?
* 助教回答：
>在執行 GET / POST 請求之前，會先執行預檢請求，它預檢通過了，所以可以看到 network 狀態碼 200
而實際上被 CORS 擋下，沒有實際請求回內容，所以 xhr status 為 0