Angular 5中调用CKEditor出现nosniff MIME类型错误的解决方法

这个问题我之前碰到过不少次，本质是浏览器的X-Content-Type-Options: nosniff安全策略在起作用——它强制要求服务器返回的脚本文件必须带有合法的text/javascript MIME类型，而你的服务器返回的ckeditor.js的MIME类型不符合要求，所以被拦截了。下面是几种靠谱的解决办法，按优先级推荐：

方法一：通过npm安装并配置Angular CLI引入（最推荐） #

这种方式能让Angular的开发服务器自动处理MIME类型，避免路径和类型问题：

1. 首先通过npm安装CKEditor 4（Angular 5兼容CKEditor 4，CKEditor 5需要对应旧版的Angular组件）：

   npm install ckeditor --save
   

2. 打开项目根目录下的.angular-cli.json（Angular 5用的是这个配置文件，不是后来的angular.json），找到apps[0].scripts数组，添加CKEditor的脚本路径：

   "scripts": [
     "../node_modules/ckeditor/ckeditor.js"
   ]
   

   如果你需要CKEditor的默认样式，也可以在apps[0].styles数组里添加：

   "styles": [
     "../node_modules/ckeditor/contents.css"
   ]
   

3. 在需要使用CKEditor的组件里，先声明全局的CKEditor变量：

   declare var CKEDITOR: any;
   

4. 之后就可以在组件的ngAfterViewInit钩子中初始化编辑器了：

   ngAfterViewInit() {
     CKEDITOR.replace('your-textarea-id');
   }
   

方法二：将CKEditor放入assets目录并使用相对路径引入 #

如果你是手动下载的CKEditor包，把整个CKEditor文件夹复制到src/assets/目录下，然后修改index.html里的脚本引用路径为相对路径：

<script src="assets/ckeditor/ckeditor.js"></script>

Angular的开发服务器会自动识别assets目录下的JS文件，并返回正确的text/javascript MIME类型，这样就不会触发nosniff错误了。

方法三：配置服务器的MIME类型（自定义服务器场景） #

如果你的项目是部署到自定义后端服务器（比如Node.js Express、Nginx等），需要确保服务器对.js文件返回正确的MIME类型：

• Express服务器：确保使用express.static时没有覆盖默认的MIME类型，或者手动设置：

  const express = require('express');
  const app = express();
  // 静态文件目录配置，默认会处理MIME类型
  app.use(express.static('public'));
  

• Nginx服务器：检查mime.types配置文件中是否包含：

  text/javascript js;
  

  如果没有，添加后重启Nginx即可。

额外注意点 #

• 避免在index.html中使用绝对路径（比如http://localhost:4200/ckeditor/ckeditor.js），改用相对路径能减少路径解析问题。
• Angular 5属于旧版本，如果你想使用CKEditor 5，需要安装兼容的Angular组件版本：npm install @ckeditor/ckeditor5-angular@1.x --save，新版本的@ckeditor/ckeditor5-angular不再支持Angular 5。

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