跨域問題
也就是俗稱的前端與後端互動需要同源策略，即如下：
域：伺服器網域名稱，唯一標識(協定，網域名稱，連接埠)必須保證一致，說明域相同
跨域：在一個伺服器上，去訪問另一個伺服器上，並且得到另一個伺服器回傳回來的值，這就是javascript跨域，其實簡單點，之前我們做的ajax，都是在同域中訪問，現在只是訪問的伺服器變成了另外的，不是同一台了。僅此而已。但是這樣一變，之前的程式碼就不能用了。
解決跨域有幾種方式，其中之一就是建置代理伺服器（nginx），讓所訪問網域名稱、連接埠、路徑相同。但我這裡不想用nginx，則可以用VScode 的擴展外掛Live Server簡單實現。
VSCode 外掛Live Server代理設定
Live Server擴展的設定，可以進入設定介面設定，也可以手動設定settings.json，內容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { "liveServer.settings.host": "localhost", //網域名稱或IP "liveServer.settings.port": 5500, //預設連接埠 "liveServer.settings.wait": 1000, //重新整理頻率 "liveServer.settings.CustomBrowser": "chrome", //開啟到目標瀏覽器 "liveServer.settings.ChromeDebuggingAttachment": false, //是否開啟ChromeDebug "liveServer.settings.proxy": { //代理設定 "enable": true, //是否開啟代理設定 "baseUri": "/api", //代理的訪問根路徑，如http://localhost:5500/api "proxyUri": "http://www.xxxx.com:8080/api" //遠端伺服端介面 } } |
設定完後，重啟 LiveServer 後，在瀏覽器輸入 http://localhost:5500/api 會被代理到http://www.xxxx.com:8080/api 介面上，如果程式碼伺服器不可訪問，LiveServer 就會忽略proxy屬性，以預設的方式開啟。透過這個方式，你可直接掛載工程目錄到對應的tomcat、jetty、iis、php-fpm等後端目錄進行處理。