1. 程式人生 > >angularjs中post請求進行跨域

angularjs中post請求進行跨域

post請求進行跨域 angularjs內建封裝了類ajax的網路服務$http,所以實現了依賴外部外掛來完成完整的前後端分離方案
$scope.main = {
    getData: function () {
        $http({
            method: 'POST',
            url: ,
            headers: {
                'Content-Type' : 'application/x-www-form-urlencoded'
},
            data: {
                myUrl: 
}         }).then(function success(result) {             //資料請求成功 console.log(result.data);         },function error(err) {             //資料請求失敗 console.log(err);         });     }
}; 注意:表面上是向$http中傳入了一個回撥函式提供相應時呼叫,實際是返回了一個promise物件,angular1.2以上的版本對$http進行了優化 優化後:
$scope.main = {
    getData: function 
() {         var myUrl = ;         var url = ;         var promise = $http({             method: 'POST',             url: url,             headers: {                 'Content-Type' : 'text/plain' },             data: {                 myUrl: myUrl             }         });         console.log(promise);         //第一中寫法
promise.then(function success(data) {             console.log(data);         },function error(err) {             console.log(err);         });         //第二種寫法 promise.success(function (data) {             console.log(data);         });         promise.error(function (err) {             console.log(err);         });     } };
當promise物件返回時,可以鏈式呼叫;也可以分開來操作 node伺服器配置:      只使用 GET, HEAD 或者 POST 請求方法。如果使用 POST 向伺服器端傳送資料,則資料型別(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一種。不會使用自定義請求頭(類似於 X-Modified 這種)。 但請求以如果 GET, HEAD 或者 POST 以外的方法發起請求。或者,使用 POST,但請求資料為 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的資料型別。比如說,用 POST 傳送資料型別為 application/xml 或者 text/xml 的 XML 資料的請求或者使用自定義請求頭(比如新增諸如 X-PINGOTHER)時,瀏覽器就需要向伺服器傳送預請求,以確定伺服器是否支援後續請求,如果支援,瀏覽器則繼續傳送後續Ajax請求
//http物件,通過他可以建立伺服器,設定埠號...
var http = require('http');
//url物件,可以解析url中的內容
var url = require('url');
//查詢引數物件,處理查詢引數
var ql = require('querystring');

var server = http.createServer(function (request,response) {

    //設定編碼格式
request.setEncoding('UTF-8');

    //允許跨域請求, * 代表接收任何請求
response.setHeader('Access-Control-Allow-Origin','*');

    //接收前端傳送的所有請求資料
var postData = '';

    //監聽,前端有資料,有就呼叫
request.addListener('data',function (data) {

        postData += data;

    });
    //前端資料接收完畢
request.addListener('end',function () {

        console.log('資料接收完畢');

        //轉化為JSON物件
var postDataObj = JSON.parse(postData);

        console.log(postDataObj);
        console.log([url,ql]);

        //接收伺服器請求別的伺服器或藉口返回的資料
var resultData = '';
        
        http.get(postDataObj.myUrl,function (request) {
            request.setEncoding('UTF-8');
            
            //監聽資料,有資料執行回撥
request.on('data',function (result) {
                resultData += result;
            });
            //接收完畢,相應給前端
request.on('end',function () {
                response.end(resultData);
            });
        }).on('error',function (err) {
            response.end(err);
        });
    });

});
server.listen(8000,function (err) {
    if(!err){
        console.log('伺服器埠在8000');
    }
})
angularjs請求:
$scope.main = {
    getData: function () {
        $http({
            method: 'POST',
            url: ,
            headers: {
                'Content-Type' : 'application/x-www-form-urlencoded'
},
            data: {
                myUrl: }
        }).then(function success(result) {
            //資料請求成功
console.log(result.data);
        },function error(err) {
            //資料請求失敗
console.log(err);
        });
    }
};