ionic+nodejs開發遇到的跨域和post請求數據問題

最近學習ionic+nodejs開發混合app中遇到了一些問題，在此總結一下。

開發環境搭建

項目地址 https://github.com/ytudt/nodejsApp

代碼和問題都會在之后的學習中持續更新

1.跨域問題：

     之前一直想用ionic+angular打包app時代碼在客戶端，因為客戶端js有ajax請求，這樣去請求服務器數據時是不是跨域？

     在實際調試中后台nodejs起一個服務器 192.168.0.19:3000，然后前端我用sublime的server起一個服務器這樣的確是跨域，所以在開始前台請求數據我一直用jsonp的方式。

而在真機上跑也可以跑通，后來因為要發比較大的數據到后台，所以jsonp就不可以了。

    最近光搜資料得出的結論是當把app打包后在手機端實際上是file協議訪問，顧沒有跨域問題。然后開始試驗，電腦端測試時安裝了谷歌的一個插件Allow-Control-Allow-Origin（注意：需在Access-Control-Expose-Headers加上Allow-Control-Allow-Origin: *（表示允許所有ip訪問））此插件實際用了cors的方式允許跨域取得數據。

    最終在電腦端和真機測試都能順利拿到數據。

2.angular發送post請求，開始這么寫的

$http.post(url, message).success(function(data) {
        console.log(data);
        });

此時發現后台拿不到數據，然后各種查資料以及查看谷歌瀏覽器控制台信息，得出結論angular post請求默認數據格式為 application/json  而同樣的后台程序我用jquery發送post請求后台可以拿到數據。以下為angular和jquery發送請求的信息。

                                                                     jquery 的請求頭

                angular post請求頭

 

此后根據angular官網的寫法，重新改了代碼

 var url = GlobalVariable.SERVER_PATH + "/doWrite";
        var req = {
          method: 'POST',
          url: url,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Accept': '*/*'
          },
          data:message  //message 必須是a=b&c=d的格式
        };
        $http(req).success(function(data){
          console.log(data);
           obj_goodsListData = data;
          deferred.resolve(obj_goodsListData);
        }).error(function(){});

此時重新查看angular請求頭如下。后台可拿到angular發送post的數據。

備注：今天在用vue時發現之前node拿不到angular傳過來的post數據是因為我node配置body－parse如下

app.use(bodyParser.urlencoded({ extended: false }));

這樣導致前后端不能解析angular發過來的數據，之前是通過改變前端請求頭來讓node拿到數據。

vue默認請求頭和angular一樣。

今天發現另外一種方式在不改變vue請求頭的情況下，node body－parse做如下配置，node可拿到數據。

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());