博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular2 jsonp跨域请求 express输出jsonp数据
阅读量:6337 次
发布时间:2019-06-22

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

坑了半天终于搞定了,看代码。

前端部分代码

1、app.module.ts

import {JsonpModule} from "@angular/jsonp";

2、需要调取数据的组件 jsonp.component.ts

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数据即可

router.get('/', function(req, res, next) {  // 使用jsonp  res.jsonp({"name": "heping"});});

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

你可能感兴趣的文章
wampServer连接oracle
查看>>
CentOS 6.5下编译安装新版LNMP
查看>>
Android Picasso
查看>>
top命令
查看>>
javascript的作用域
查看>>
新形势下初创B2B行业网站如何经营
查看>>
初心大陆-----python宝典 第五章之列表
查看>>
java基础学习2
查看>>
sysbench使用笔记
查看>>
有关电子商务信息的介绍
查看>>
NFC·(近距离无线通讯技术)
查看>>
多线程基础(三)NSThread基础
查看>>
PHP的学习--Traits新特性
查看>>
ubuntu下,py2,py3共存,/usr/bin/python: No module named virtualenvwrapper错误解决方法
查看>>
Ext.form.field.Number numberfield
查看>>
Linux文件夹分析
查看>>
解决部分月份绩效无法显示的问题:timestamp\union al\autocommit等的用法
查看>>
nginx 域名跳转 Nginx跳转自动到带www域名规则配置、nginx多域名向主域名跳转
查看>>
man openstack >>1.txt
查看>>
linux几大服务器版本大比拼
查看>>