開發環境下發送遠端請求

1 篇文章 / 0 new

發表回應前，請先登入

週三, 2018-03-14 09:03

author

開發環境下發送遠端請求

在開發環境中 http 要取端遠端主機資料時, 會被系統擋住, 出現下訊息

Failed to load http://192.168.0.10/AngularDemo/data/users.php?q=list No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

要讓系統可以連接遠端, 則需進行 proxy 設定, 作法如下

►在專案跟目錄下(其它目錄也行指示須注意路徑)建立 proxy.cfg.json 內容範例如下

{
  "/data": {
    "target": "http://192.168.0.10/AngularDemo",
    "secure": false
  }
}

告訴系統當請求為 http://localhost:4200/data/.. 時, 則會轉向 http://192.168.0.10/AngularDemo/data/..發出請求, 透過系統轉向就不會被擋住了

► 調整 package.json 增加 --proxy-config proxy.cofg.json 參數

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.cofg.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

重新啟動環境 npm start