ionic2項目從Localhost向遠程服務器提交請求,在真機中可以返回正確的數據,但是在Chrome中遇到了跨域的問題。
簡單來說,因爲真機裏網頁的訪問走的是file://協議,而非http://或https://,因此不會出現跨域問題,但是瀏覽器裏開發調
試的時候,由於實際上是ionic的CLI在本地跑了一個小服務器,網頁等資源都是通過http加載的,就會出現跨域問題。
解決這個其實很簡單,後端服務器不需要做任何處理,只需要在ionic的配置文件(ionic.config.json)里加上proxy這個字段,
設置ionic代理,如下所示:
{
"name": "Ionic2SexyGallery",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [{
"path": "/api",
"proxyUrl": "http://www.tngou.net/tnfs/api"
}]
}
找到項目src/app/app.service.ts文件
如果在本地調試,將domain設置爲本機ip,爲每個模塊設置相應的路徑。
運行項目(指定ip地址要與app.service.ts中設置的ip相同):