angular4跨域请求

Posted on | Edited on | In

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

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

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

1
2
3
4
5
6
7
8
9
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot(routes),
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
})

],

在所需要的面引入http:

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

然后注入:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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');

今天就介绍到这，谢谢