angular2 post 与express 后端模拟交互小细节

     楼主的第一篇文章。之前没记录的习惯，感觉到现在学的东西有点像斜坡的泥土，一下雨都给冲刷没了！导致最不能忍受的同样的坑，可能还是踩第二次！每次找到问题心里都在默默骂自己煞笔。说完感想，步入正题！

背景：楼主学习历程angular1(略懂) => vue(入门) => angular（这篇文章都指angular2+）。angular也是刚学，在自己写写demo玩玩没，实现登陆功能。后端使用node express框架，也是自己写。

声明：目前这里都是本地测试代码，生产后面更新。

问题：angular，发http.post请求到后端，后端收到不前端发来信息。（ 大佬忽略这篇文章 ）

上代码 ！node :(.ts)   ps:本来上图的，想想方便ctrl + c嘛

 import * as express from 'express'

 // import * as bodyParser from 'body-parser' // 先不要看注销

 const app = express();

// app.use(bodyParser.json())                         // 先不要看注销

 app.post('/api/login', (req, res) => {

     console.log(req.body);

     res.send(req.body);

 });

 const server = app.listen(8081, () => {

     let host = server.address().address;

     let port = server.address().port;

     console.log("访问接口：http://%s%s", host, port)

 })

运行代码：

最初使用Postman来测试：

使用Postman 发射

接受结果

在网上找了各种问题总结（坑）：发送http请求，需要http的MIME字段(装个B昨天晚上刚刚看的书)。通俗讲header,需要告诉http,你发送的文件格式。

楼主这里是json

我们来测试一下：

并没有什么卵用

http,json格式发送出去到express代码里面去了。但是express,需要解开json转成Object的呀！注释代码里面解开,工具：body-parser

npm install --save body-parser

import * as bodyParser from 'body-parser'

app.use(bodyParser.json())      //json 格式，更多格式参照google，baidu. github楼主采集English。

后端测试好了，调试前端anuglar:

    前面问题的原因都知道了（angular需要header的添加），直接上正确代码：

这里有一个小细节：楼主在去找资料的时候有人说angular的header,可不用添加，angular有默认的json模式的添加；然后楼主拿着这里没有添加的haeder的代码去测试，测不出来！各种小坑

import {Http,Headers} from '@angular/http';

import 'rxjs/Rx';

submitForm() {

//let headers= new Headers();  修改办法  添加头部

//headers.append('Content-Type','application/json'); 修改办法  http 文件格式

const myData= JSON.stringify({ userName:1111, password:1111})

this._http.post('/api/login',myData, {headers})

.map(res=>res.json())

.subscribe(

data=>console.log(data),

err=>console.log('Something went wrong!')

)}

解开注销代码。这里你可以能会遇到跨域的问题：（不同端口也算跨域） 

再次强调这里是本地测试解决办法，生产环境后续更新。

解决办法： 1，主目录添加：proxy.config.json

 {

 "/api":{

    "target":"http://localhost:8081"

   } }

2，修改主目录package.json文件

"scripts": {

"ng":"ng",

"start":"ng serve --proxy-config proxy.config.json",

"build":"ng build --prod --aot",

"test":"ng test",

"lint":"ng lint",

"e2e":"ng e2e"

},

修改完记得，重启angular程序。

测试：

前端

后端

楼主的第一次，文字，排版辣鸡，见谅！  后面我会继续更新踩坑记录