博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular2 express使用cors跨域获取数据
阅读量:6328 次
发布时间:2019-06-22

本文共 1813 字,大约阅读时间需要 6 分钟。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

1、 angular2 不需要配置,按照常规办法发送请求就可以了

2、express端配置

1. 安装corsnpm install cors2. 配置app.js文件var cors = require("cors");...app.use(cors());3. 在路由中获取数据,然后发送数据 res.json(data);

3、优点:

  1. 支持 get/post方法

  2. CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  3. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与

4、示例代码

http.service.tsimport {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.tsimport {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;  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.jsvar 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;

转载地址:http://uiwoa.baihongyu.com/

你可能感兴趣的文章
Centos5.8 安装 PHP5.5 和 memcached
查看>>
[转]CENTOS LINUX安装并使用NFS共享文件
查看>>
Android AES加密算法及其实现
查看>>
Entity Framework公共的增删改方法
查看>>
hdu1698 Just a Hook 线段树:成段替换,总区间求和
查看>>
dorado spring知识补充
查看>>
Android -- ViewPager、Fragment、状态保存、通信
查看>>
如果想消除随机性的感觉
查看>>
.NET网站自动浏览器分享,解决IIS6应用池回收后第一次访问慢问题
查看>>
关于验证码识别3
查看>>
【JavaScript】javascript常用的东西
查看>>
Cucumber 入门一
查看>>
c++ 单例模式
查看>>
JAVA反射机制
查看>>
Java几款性能分析工具的对比
查看>>
SVN使用教程总结
查看>>
Chrome各个版本小常识
查看>>
阿里云图片压缩上传代码
查看>>
JavaScript函数式编程
查看>>
C++_系列自学课程_第_6_课_bitset集_《C++ Primer 第四版》
查看>>