問題記錄——跨域

Access to XMLHttpRequest at 'localhost:3000/user/login' from origin 'http://127.0.0.1:3001' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

上面這句話我應該都能滾瓜爛熟了，由於它困擾了我好久，通過各類搜索引擎我找到了不少的答案，但沒有一種解決方法使用於我此次遇到的問題。仔細看這個錯誤提示的前半句，感受像是跨域問題，由於個人瀏覽器端開的服務是3001端口，而服務端的服務是3000端口，那麼這顯然存在一個跨域問題，因而乎我利用express的cors中間件來解決這個問題，可是以後發現瀏覽器仍是出現這個錯誤提示，因此如今可能有兩個緣由：

1. 上述利用cors解決跨域的方法不使用，改換成其餘的跨域解決方法
2. 這根本就不是跨域的問題

最後確認是緣由二，因而我從網上找來各類解決方案：

1. 緣由：chorme瀏覽器爲了安全性考慮，默認對跨域進行訪問禁止

解決方案：給瀏覽器傳入啓動參數（--allow-file-access-from-files），容許跨域訪問或者改用火狐瀏覽器

2. 緣由：由於沒有在服務環境裏運行含有ajax方法的頁面，而是直接經過瀏覽器打開是不行的，即本地頁面ajax請求本地頁面，必須經過服務器環境運行 仔細看來這個問題，發現它實際上是XMLHttpRequest cannot load file:///Users/yzy/github/news-list/js/mock.json. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. 因此跟個人問題是不同的，另外個人webpack已經配置了開發服務器，因此這個方法不適用

最後解決方法：最後發現其實這就是一個跨域問題，仔細看看問題，ajax請求localhost:3000/user/login沒有代表protocol，其實將ajax請求寫完整加上http便可解決問題http://localhost:3000/user/login

總結（血的教訓）：只要是協議、域名或者端口號有任何一個不一樣，都會被當作是不一樣的跨域，寫ajax請求時url務必寫完整或者提早配置好