前端解決跨域問題-nmp安裝http-server
前端解決跨域問題-nmp安裝http-server
問題背景
專案組的露露學習d3遇到問題，前端無法讀取js中呼叫的csv檔案
於是誠摯地邀請露露來了我的寢室坐坐，嘗試了相對路徑與絕對路徑均無效，且絕對路徑複製進chrome可直接下載，即檔案路徑沒錯。
右鍵“檢查”進入開發者模式看報錯，
報錯：Access to XMLHttpRequest at 'file:///C:/Users/buzou/Desktop/OneNum/OneNum.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
搜尋得知為跨域問題
跨域問題
跨域問題: 在本場景下，指的是俠義的跨域問題。
由瀏覽器同源策略限制的一類請求場景。
什麼是同源策略？
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
大概看了Google的各種結果，嘗試了一下兩個看上去最容易的辦法
嘗試方法一：chrome快捷方式加” --allow-file-access-from-files“無效
嘗試方法二：嘗試使用nmp安裝本地伺服器
node.js實際上我也只是安裝了但不熟悉，在配置的過程中仍然有幾個坑，具體步驟跟著下面的連結來就好了：
https://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server
（講的全面且權威）
踩過的坑就是http-server要下載到全域性，用這條命令安裝npm install -g http-server，
在對應的d3（前端檔案）目錄下輸入http-server啟動，會看到它給出網址，複製“127.0.0.1”這一條到瀏覽器，能進入伺服器（後臺）頁面。
後記
這個寫的看起來挺簡單的但實際上還是卡了一個多小時，心得就是幫美女解決問題不要慌，不能心猿意馬。
後續寫部落格記錄再搜尋了一下，https://zhuanlan.zhihu.com/p/130391287中寫了chrome版本使用場景: 80.0.3987.163（正式版本） （64 位）可以通過指定“ --allow-file-access-from-files”來繞過跨域問題。