Angular 5中JSONP请求如何携带HttpHeaders参数？

嘿，这个问题我之前也碰到过，其实核心是JSONP的底层原理限制了它没法携带自定义HTTP头，我给你详细拆解下：

JSONP的本质是通过浏览器动态插入<script>标签来加载跨域脚本，而浏览器对<script>发起的请求有严格限制：不允许自定义任何HTTP请求头。这是浏览器的安全机制，和Angular的HttpClientJsonpModule实现无关，所以你会发现http.jsonp()方法从设计上就没有提供设置headers的参数选项。

根据你的场景，这里有几个实用的解决思路：

• 改用支持CORS的普通GET请求（优先推荐）
  如果你的后端服务可以配置CORS（跨域资源共享）规则，那直接用你熟悉的http.get()方法携带请求头是最顺畅的方案。只要后端在响应头中添加Access-Control-Allow-Origin等相关CORS配置，就能正常实现跨域请求，完全不需要依赖JSONP。

• 将参数放到URL查询字符串中
  如果必须使用JSONP（比如后端不支持CORS），可以把原本要放在请求头里的参数，拼接成URL的查询参数来传递。示例代码如下：

  // 把请求头参数转成URL查询参数
  const headerParamValue = 'your-value-here';
  const encodedValue = encodeURIComponent(headerParamValue);
  const myUrl = `https://your-api-url.com/data?customHeader=${encodedValue}&callback=JSONP_CALLBACK`;
  
  // 发起JSONP请求
  this.http.jsonp(myUrl, 'callback');
  

  之后让后端从URL的查询参数中读取这些值即可。记得用encodeURIComponent()处理参数值，避免特殊字符导致URL解析错误。

• 和后端沟通适配方案
  有些后端服务会针对JSONP场景，提供自定义的参数传递方式（比如特定的URL参数）来替代HTTP头。你可以和后端开发同学沟通，看看有没有适配JSONP的参数传递规则。

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