Angular 5：HTTPClient发起JSONP请求时callbackParam不生效

我之前也碰到过类似的困惑，咱们一步步梳理问题核心，先从Angular JSONP的基础逻辑说起：

首先，你导入HttpClientJsonpModule的操作是对的，但要确保它已经被添加到AppModule的imports数组里（不能只写import语句），比如：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule // 这里必须明确添加到数组中
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来要明确：JSONP方法的第二个参数，作用是指定接口要求的回调参数名，而非自定义回调函数名。默认这个参数是'callback'，只有当你的接口要求的参数名不是这个（比如有些接口用'jsonp'或'jsonpCallback'）时，才需要修改第二个参数。

举个实际使用的例子：如果目标接口要求回调参数名为jsonpCallback，你的请求代码应该是这样的：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="getJsonpData()">获取JSONP数据</button>'
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getJsonpData() {
    // 第二个参数传入接口要求的回调参数名
    this.http.jsonp('https://your-api-url.com/data', 'jsonpCallback')
      .subscribe({
        next: (data) => console.log('返回数据:', data),
        error: (err) => console.error('请求失败:', err)
      });
  }
}

现在来排查你可能遇到的问题：

• 接口是否真的支持JSONP？
  这是最容易忽略的点！不是所有接口都支持JSONP，你可以打开浏览器开发者工具的Network面板：

  • 查看请求URL，如果带有类似?jsonpCallback=ng_jsonp_callback_xxx的参数，说明Angular已经正确处理了第二个参数；
  • 再看接口返回内容，如果是ng_jsonp_callback_xxx({...你的数据...})这样的格式，说明接口支持JSONP；如果返回纯JSON字符串，那这个接口根本不支持JSONP，得换其他方式（比如CORS代理）。

• 回调参数名是否完全匹配？
  比如接口文档要求传callback=xxx，那第二个参数用默认的'callback'就行；如果接口要求的是jsonp=xxx，那第二个参数必须传'jsonp'，大小写、拼写都不能错。

• 有没有拦截器干扰请求？
  如果你项目里有自定义的HttpInterceptor，检查它是否修改了请求的查询参数，不小心把Angular自动添加的回调参数删掉了。

• 别把JSONP和普通AJAX搞混
  JSONP是专门用来绕过CORS限制的，如果你的接口本身已经配置了CORS允许跨域，直接用http.get()就行，没必要用JSONP。

内容的提问来源于stack exchange，提问作者Pankaj