angular4和其他框架一樣，運(yùn)用網(wǎng)絡(luò)請求的時(shí)候都會(huì)出現(xiàn)跨域的情況（跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制），出現(xiàn)跨域以后怎么解決呢，今天介紹一種angular4-JSONP解決跨越,下面縣介紹一下jsonp:

jsonp動(dòng)態(tài)生成sript標(biāo)簽 ，src 指向地址：ajax請求受同源策略影響，不允許進(jìn)行跨域請求，而script標(biāo)簽src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。

進(jìn)入正題直接看代碼,首頁在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) {}

帶參數(shù)的, 注意一定要引入 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);
    });
  下面這兩個(gè)參數(shù)是必須引入的，如果不存在jsonp可以不加2
 1. d1.set('format', 'json');
 2. d1.set('callback', 'JSONP_CALLBACK');
  

今天就介紹到這，謝謝