Angular 5中使用HttpClientJsonpModule发起JSONP请求报头部错误

我之前在Angular 5里处理JSONP请求时也碰到过几乎一模一样的头部错误，结合踩过的坑给你几个具体的排查和解决方向：

核心注意：JSONP不支持自定义HTTP头部 #

首先得明确一个关键点：JSONP的本质是通过动态创建<script>标签加载远程资源，不是标准的AJAX请求，所以它完全不支持设置自定义HTTP头部（比如Authorization、Content-Type这类）。如果你在请求代码里加了类似headers: new HttpHeaders({...})的配置，直接删掉就能解决大部分头部相关的错误。

检查URL与回调参数配置 #

• Angular的http.jsonp()会自动生成唯一的回调函数名，你只需要在URL里用JSONP_CALLBACK作为占位符，比如：

  const requestUrl = 'https://your-api-domain.com/data?callback=JSONP_CALLBACK';
  

  不要手动写死具体的函数名（比如callback=myFunc），Angular会自动替换这个占位符。
• 如果后端要求的回调参数名不是callback（比如有些后端用jsonp作为参数名），调用时要把第二个参数改成对应的名称：

  this.http.jsonp(requestUrl, 'jsonp'); // 第二个参数是后端要求的回调参数名
  

确认模块与服务的导入正确性 #

• 在app.module.ts里，确保导入的是@angular/common/http下的HttpClientJsonpModule，而不是旧版HttpModule里的JsonpModule：

  import { HttpClientJsonpModule } from '@angular/common/http';
  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      HttpClientModule, // 必须先导入这个
      HttpClientJsonpModule
    ]
  })
  export class AppModule { }
  

• 在你的数据服务里，注入的是HttpClient，而不是旧的Http或Jsonp服务：

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class DataFetchService {
    constructor(private http: HttpClient) { }
  
    getRemoteData() {
      const url = 'https://your-api-domain.com/data?callback=JSONP_CALLBACK';
      return this.http.jsonp(url, 'callback');
    }
  }
  

验证后端返回格式 #

JSONP要求后端返回的内容必须是函数调用包裹的JSON，比如：

myGeneratedCallback({ "name": "test", "data": [...] })

如果后端返回的是纯JSON字符串（没有函数包裹），浏览器会直接抛出语法错误，这时候需要联系后端调整返回格式，确保符合JSONP的规范。

排查跨域隐性限制 #

虽然JSONP本身是为跨域设计的，但有些服务器或CDN会对<script>标签的请求做额外校验，比如检查Referer头部是否在允许列表中。如果你的页面域名不在后端的允许名单里，可能会返回403或其他头部相关错误，这时候需要确认后端的跨域配置是否开放了你的域名权限。

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