脚本宝典收集整理的这篇文章主要介绍了angular2 express使用cors跨域获取数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
1、 Angular2 不需要配置，按照常规办法发送请求就可以了
2、exPress端配置
1. 安装cors
npm install cors
2. 配置app.js文件
VAR cors = require("cors");
...
app.use(cors());
3. 在路由中获取数据，然后发送数据 res.json(data);3、优点：
支持 get/post方法
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与
4、示例代码
http.service.ts
import {Injectable} From "@angular/core";
import {Http, Jsonp} from "@angular/http";
import "RxJS/add/operator/map";
@Injectable()
export class HttpService {
constructor(public http:Http, public jsonp:Jsonp) {
}
httpGet(url, params) {
return this.http.get(url, {search: params}).map(result=>result.json());
}
httpPost(url, params) {
return this.http.post(url, {search: params}).map(result=>result.json());
}
jsonpGet(url, params) {
return this.jsonp.get(url, {search: params}).map(result=>result.json());
}
}
label.COMponent.ts
import {Component, OnInit} from "@angular/core";
import {HttpService} from "../services/http.service";
@Component({
selector: "blog-label",
templateUrl: "../templates/label.tpl.html"
})
export class LabelComponent implements OnInit {
data: Array<Object>;
constructor(public httpService:HttpService) {
this.data = [];
}
ngOnInit() {
var url = "http://localhost:3000/skill";
this.httpService.httpGet(url, '').subscribe(res=> {
console.log(res);
this.data = res;
}, err=> {
console.log(err);
});
}
}
exPRess app.js 部分用到的代码
var express = require('express');
var cors = require("cors");
var app = express();
app.use(cors());express label.js
var express = require("express");
var router = express.Router();
var connection = require("../conf/db");
router.get("/", function (req, res, next) {
connection("select * from skill", function (err, rows, fields) {
res.json(rows);
console.log(rows);
})
});
module.exports = router;以上是脚本宝典为你收集整理的angular2 express使用cors跨域获取数据全部内容，希望文章能够帮你解决angular2 express使用cors跨域获取数据所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。