angularjs中post请求进行跨域

post请求进行跨域

angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案

$scope.main = {    getData: function () {        $http({            method: 'POST',            url: 'http://localhost:8000',            headers: {                'Content-Type' : 'application/x-www-form-urlencoded'            },            data: {                myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'            }        }).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 = 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';        var url = 'http://localhost:8000';        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: 'http://localhost:8000',            headers: {                'Content-Type' : 'application/x-www-form-urlencoded'            },            data: {                myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'            }        }).then(function success(result) {            //数据请求成功            console.log(result.data);        },function error(err) {            //数据请求失败            console.log(err);        });    }};