最近学习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());

ionic+nodejs开发遇到的跨域和post请求数据问题的更多相关文章

  1. 转载:ionic+nodejs开发遇到的跨域和post请求数据问题

    转载自:http://www.cnblogs.com/ytu2010dt/p/5471366.html 最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 项目地址 htt ...

  2. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  3. NodeJS设置Header解决跨域问题

    转载: NodeJS设置Header解决跨域问题 app.all('*', function (req, res, next) { res.header('Access-Control-Allow-O ...

  4. 记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

    我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...

  5. 【Java Web开发学习】跨域请求

    [Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...

  6. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  7. 解决React前端在开发环境的跨域问题

    在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...

  8. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  9. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

随机推荐

  1. shell 知识

    解压 tar.bz2文件 bunzip2 linux-2.6.13.tar.bz2 | tar xvf -

  2. 强大好用的"文本"编辑器

    1 editplugs 说明:EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本.HTML和程序语言的Windows编辑器,你甚至可以通 ...

  3. ENode 2.0 - 介绍一下关于ENode中对Command的调度设计

    CQRS架构,C端的职责是处理从上层发送过来的command.对于单台机器来说,我们如何尽快的处理command呢?本文想通过不断提问和回答的方式,把我的思考写出来. 首先,我们最容易想到的是使用多线 ...

  4. Json序列化之.NET开源类库Newtonsoft.Json的研究

     一.Json简介 JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的文 ...

  5. 关于javascript模块加载技术的一些思考

    前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...

  6. java提高篇(二一)-----ArrayList

    一.ArrayList概述       ArrayList是实现List接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List ...

  7. SQLSERVER取当前月第一天和最后一天

    --本月第一天: select   dateadd(dd,-day(getdate())+1,getdate()) --本月最后一天: SELECT dateadd(ms,-3,DATEADD(mm, ...

  8. 本地DNS安装

    在centOS里最常用的DNS服务工具应该是bind了.下面就以bind为例做一个DNS服务. 首先查看bind 是否已经安装 Rpm -qa | gerp bind 如果没有的话就用yum 安装一下 ...

  9. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  10. ssc

    接了一个ssc的小项目,却因为对方的不作答而半途而废.我写了一天的代码算是废了. 主程序 <?xml version="1.0" encoding="utf-8&q ...