​​Vue API 課程補充說明
​​最近有學員遇到無法登入的問題，在此說明原因及解決辦法 ​😄​ 
​​

​​原因 - 同源政策

​​由於許多廣告商會透過 Cookie 的形式紀錄用戶在各網站的使用歷程，因此許多瀏覽器開始實作「同源政策」，此政策下瀏覽器無法存取跨域的 Cookie。
​​
​​什麼是同源
​​參考：
​​
 
同源政策 (Same-origin policy)
同源政策限制了程式碼和不同網域資源間的互動。
developer.mozilla.org
同源政策 (Same-origin policy) • developer.mozilla.org
​​
​​假設網址為：http://store.company.com/dir/page.html​，以下為同源及不同源的網址
​​
​​URL
​​Outcome
​​Reason
​​http://store.company.com/dir2/other.html​
​​同源
​​ 
​​http://store.company.com/dir/inner/another.html​
​​同源
​​ 
​​https://store.company.com/secure.html​
​​不同源
​​協定不同
​​http://store.company.com:81/dir/etc.html​
​​不同源
​​埠號不同
​​http://news.company.com/dir/other.html​
​​不同源
​​主機位置不同
​​
​​
​​
​​要所屬的網域、埠號、協定都相同，才屬於同源，並且在同源的狀況下伺服器才能存取 Cookie。
​​

​​如何驗證錯誤

  1. ​​依據課程步驟，在本地完成登入的狀態，完成後再繼續進行以下步驟。
  1. ​​本地登入後，在 Chrome 的瀏覽器下，點擊網址左方的驚嘆號或是鎖頭符號（依據目前網址是否為合法 https 而定），點擊後展開 Cookie 列表
​​
 
User-uploaded image: _2020_3_9_11_43.png
​​
​​Cookie 列表中，如果可以看到課程伺服器的網址及 Cookie 則是沒有問題，如果看到 Cookie 空空如也，代表無法正確存取 Cookie。
​​
 
User-uploaded image: _2020_3_9_11_45.png
​​
​​

​​解決辦法

​​
  1. ​​進入 Chrome 的「設定」
​​
 
User-uploaded image: _2020_3_9_11_51.png
​​
  1. ​​選擇「隱私權和安全性」，右方會出現「網站設定」的選項
​​
 
User-uploaded image: _2020_3_9_11_50.png
​​
​​
  1. ​​進入「Cookie 和網站資料」
​​
 
User-uploaded image: _2020_3_9_11_52.png
​​
​​
  1. ​​最後這步驟有兩個方法，擇一即可
  1. ​​方法一：不要封鎖第三方的 Cookie，這代表你的瀏覽器預設值可以讓任何網站可跨域存取你的 Cookie。通常不選擇此選項會看到更精準的廣告推播，並且讓大部分服務登入可正常運作；如果勾選此選項，則有更高的安全性及隱私。
  1. ​​方法二：封鎖，但允許特定網站存取你的 Cookie，新增課程的網址（補充在下方）到允許的列表上。這種方式安全性較高，但需要手動管理個人的 Cookie 運作。
​​
​​[*.]vue-course-api.hexschool.io
​​
 
User-uploaded image: _2020_3_9_11_52.png
​​
​​
​​
​​

​​方法二：

​​
​​如果上述的方式還是無法運作，可參考柔柔同學的方法
  1. ​​打開 Chrome ，網址輸入 chrome://flags/​ （這是實驗性的功能，會調整整個 Chrome 的設定）
  1. ​​上方網址列輸入 same Site 可看到以下畫面，將以下畫面中的兩個項目改為 Disabled