angular9 中使用jsonp实现跨域

angular中使用jsonp

• 一、环境
• 二、需求
• @L_404_2@
• • 1.引入HttpClientJsonpModule
  • 2.页面中使用
  • 3.效果图

一、环境

angular9

二、需求

项目中调用百度的地图api，使用地点输入提示的功能

地点输入提示文档连接：http://lbsyun.baidu.com/index.PHP?title=webapi/place-suggestion-api

三、实现

1.引入HttpClientJsonpModule

app.module.ts中引入

import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http'

@NgModule(
	imports: [
    HttpClientModule,
    HttpClientJsonpModule
  ])

2.页面中使用

baidu-map.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
    selector: 'app-baidu-map',
    templateUrl: './baidu-map.component.html',
    styleUrls: ['./baidu-map.component.less']
})
export class BaiduMapComponent implements OnInit {

    constructor(private http: HttpClient) { }

    getdata(){
        let url = 'http://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=你的ak'
        this.http.jsonp(url, 'callback').subscribe( (res) => {
            console.log('res: ', res);
        } );
    }
    ngOnInit(): void {
        this.getdata();
    }
}

3.效果图