坑了半天終於搞定了,看代碼。html
前端部分代碼前端
一、app.module.tsexpress
import {JsonpModule} from "@angular/jsonp";
二、須要調取數據的組件 jsonp.component.tsjson
import {Component} from "@angular/core"; import {Jsonp, URLSearchParams} from "@angular/http"; import 'rxjs/add/operator/map'; @Component({ selector: "my-jsonp", templateUrl: "app/templates/tpl1.html" }) export class AppComponent { constructor(public jsonp:Jsonp) { // 重點來了,url地址後面添加?callback=JSONP_CALLBACK let wikiUrl = 'http://localhost:3000/users?callback=JSONP_CALLBACK'; // 也可以使用URLSearchParams()設置參數,這裏只有一個參數,就寫在url裏面了。 // 使用map().substribe()獲取數據 this.jsonp.get(wikiUrl) .map(res=> res.json()) .subscribe((response) => { console.log(response); }, (error) => { console.error(error); }); } }
後臺部分代碼(express)
返回jsonp數據便可app
router.get('/', function(req, res, next) { // 使用jsonp res.jsonp({"name": "heping"}); });