Angular课程：使用Observables实现JSONP请求

前言

在现代Web开发中，跨域资源共享(CORS)是一个常见的安全限制。本文将深入探讨如何在Angular应用中通过JSONP技术绕过CORS限制，实现跨域API请求。我们将基于一个音乐搜索应用案例，展示如何从传统的HTTP请求迁移到JSONP解决方案。

JSONP技术解析

什么是JSONP？

JSONP（JSON with Padding）是一种巧妙绕过浏览器同源策略的技术方案。它通过动态创建<script>标签的方式获取跨域数据，完美避开了CORS的限制。

工作原理

1. 动态脚本注入：将API请求伪装成JavaScript文件请求
2. 回调函数包装：服务器返回的数据会被包裹在指定的回调函数中
3. 自动执行：浏览器下载并执行这个"脚本"，触发我们预先定义的回调函数

技术特点

• 仅支持GET请求
• 需要服务器端支持JSONP格式
• 相比CORS方案更简单易用
• 存在一定的安全风险（XSS攻击）

实战：改造音乐搜索应用

初始配置

首先需要导入Angular的JSONP模块：

import { JsonpModule, Jsonp, Response } from '@angular/http';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    JsonpModule  // 关键配置
  ]
})
class AppModule {}

服务层改造

我们将原有的HTTP服务改造为JSONP服务：

@Injectable()
export class SearchService {
  apiRoot: string = 'https://itunes.apple.com/search';

  constructor(private jsonp: Jsonp) {}  // 注入Jsonp服务

  search(term: string) {
    let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20&callback=JSONP_CALLBACK`;
    return this.jsonp.request(apiURL)
        .map(res => {
          // 数据处理逻辑保持不变
          return res.json().results.map(item => {
            return new SearchItem(
                item.trackName,
                item.artistName,
                item.trackViewUrl,
                item.artworkUrl30,
                item.artistId
            );
          });
        });
  }
}

关键点说明

1. callback参数：JSONP_CALLBACK是一个占位符，Angular会在运行时自动替换为随机生成的函数名
2. 请求方法：使用jsonp.request()替代原来的http.get()
3. 响应处理：虽然请求方式变了，但响应数据的处理逻辑可以保持不变

技术对比

特性	HTTP + CORS	JSONP
安全性	高	中
请求类型	所有HTTP方法	仅GET
服务器要求	需设置CORS头	需支持JSONP
实现复杂度	较高	简单
浏览器兼容性	现代浏览器	所有浏览器

最佳实践建议

1. 优先考虑CORS：如果API支持CORS，应优先使用标准HTTP请求
2. 备用方案：对于不支持CORS的老旧API，JSONP是不错的备选方案
3. 安全考虑：只信任可靠的JSONP API源，避免XSS攻击风险
4. 错误处理：为JSONP请求添加超时和错误处理逻辑

总结

通过本文的学习，我们掌握了在Angular中使用JSONP实现跨域请求的核心技术。JSONP作为一种经典的跨域解决方案，虽然有其局限性，但在特定场景下仍然非常实用。关键在于理解其工作原理，并根据实际需求选择合适的跨域方案。

对于现代Angular应用开发者来说，掌握多种跨域技术方案将大大提升应对复杂场景的能力。JSONP作为其中一种重要手段，值得放入你的技术工具箱中。