楼主的第一篇文章。之前没记录的习惯,感觉到现在学的东西有点像斜坡的泥土,一下雨都给冲刷没了!导致最不能忍受的同样的坑,可能还是踩第二次!每次找到问题心里都在默默骂自己煞笔。说完感想,步入正题!
背景:楼主学习历程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来测试:
在网上找了各种问题总结(坑):发送http请求,需要http的MIME字段(装个B昨天晚上刚刚看的书)。通俗讲header,需要告诉http,你发送的文件格式。
我们来测试一下:
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程序。
测试:
楼主的第一次,文字,排版辣鸡,见谅! 后面我会继续更新踩坑记录