如何配置Angular HttpClient使application/javascript响应直接执行而非解析为JSON

Angular HttpClient默认会将响应按json格式解析，该行为和响应头的Content-Type没有强制绑定，这就是你请求.js文件触发JSON.parse报错的根本原因。按照以下步骤即可实现和jQuery dataType: "script"完全一致的效果： #

1. 配置请求参数，关闭默认JSON解析 #

调用get方法时传入配置项，指定responseType为text，直接获取原始响应文本：

// 仅请求JS文件时加该配置，JSON请求保持原有写法即可
return this.httpClient.get('/assets/values.js', {
  responseType: 'text'
})

2. 全局执行返回的JS代码 #

拿到JS代码文本后，调用window.eval全局执行，变量会自动挂载到window对象上，和jQuery请求script的效果完全一致：

this.httpClient.get('/assets/values.js', { responseType: 'text' })
  .subscribe(jsCode => {
    window.eval(jsCode);
    // 执行完成后即可访问全局变量
    console.log(window.x); // 输出1
  })

可选：封装通用请求方法 #

可以封装成全局服务，避免每次重复写配置：

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

@Injectable({ providedIn: 'root' })
export class JsLoaderService {
  constructor(private http: HttpClient) {}

  // 用法和jQuery.getScript完全一致
  loadScript(url: string): Promise<void> {
    return this.http.get(url, { responseType: 'text' })
      .toPromise()
      .then(jsCode => window.eval(jsCode));
  }
}

调用示例：

this.jsLoaderService.loadScript('/assets/values.js')
  .then(() => {
    // JS代码执行完成后的业务逻辑
  })

注意：仅在完全信任返回的JS内容的场景下使用eval，避免执行恶意代码带来安全风险。该方案和你生产环境CGI返回的text/javascript响应处理逻辑完全一致，可直接用ng serve做Mock开发，不需要调整后端接口格式。

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