angular4跨域请求

angular4和其他框架一样，运用网络请求的时候都会出现跨域的情况（跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制），出现跨域以后怎么解决呢，今天介绍一种angular4-JSONP解决跨越,下面县介绍一下jsonp:

jsonp动态生成sript标签 ，src 指向地址：ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

进入正题直接看代码,首页在app.module.ts引入：

imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
    })

  ],

在所需要的面引入http:

 import {Http, ResponseOptions,Headers,HttpModule,URLSearchParams,Jsonp} from "@angular/http";

然后注入:

constructor(public jsonp:Jsonp,public http:Http) {}

带参数的, 注意一定要引入 URLSearchParams，要不请求是失败的: 

 let  d1 = new URLSearchParams();
  d1.set('key',   'value' );
  d1.set('key',   'value' );
  d1.set('key',   ‘value’);
  d1.set('format', 'json');
  d1.set('callback', 'JSONP_CALLBACK');  
 
  this.jsonp.get(url,{
    search: d1
  })
    .subscribe((response) => {
      let res = response.json()

      console.log(res)

    }, (error) => {
      console.error(error);
    });
  下面这两个参数是必须引入的，如果不存在jsonp可以不加2
 1. d1.set('format', 'json');
 2. d1.set('callback', 'JSONP_CALLBACK');
  

今天就介绍到这，谢谢