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');
今天就介绍到这，谢谢
