angularjs中post請求進行跨域
阿新 • • 發佈:2019-01-05
post請求進行跨域
angularjs內建封裝了類ajax的網路服務$http,所以實現了依賴外部外掛來完成完整的前後端分離方案
$scope.main = { getData: function () { $http({ method: 'POST', url: , headers: { 'Content-Type' : 'application/x-www-form-urlencoded' }, data: { myUrl:}; 注意:表面上是向$http中傳入了一個回撥函式提供相應時呼叫,實際是返回了一個promise物件,angular1.2以上的版本對$http進行了優化 優化後:} }).then(function success(result) { //資料請求成功 console.log(result.data); },function error(err) { //資料請求失敗 console.log(err); }); }
$scope.main = { getData: function當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請求() { 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); }); } };
//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); }); } };