本文介绍了一种在前端开发中遇到的诡异错误，包括Unexpected token <和Resource interpreted as Stylesheet but transferred with MIME type text/html等问题，并详细阐述了如何通过排查Filter配置来解决问题。
最近在写一个后台管理系统的时候，很简单的一个登录页面的html文件，通过浏览器访问的时候，总是报一些很诡异的错误，如：
（1）Uncaught SyntaxError: Unexpected token <
（2）Uncaught ReferenceError: $ is not defined
（3）Resource interpreted as Stylesheet but transferred with MIME type text/html
具体错误如下图：
打开Chrome的开发者工具，点击查看Sources页签，可以发下仅加载了一个html文件，而html中所引用的css，js文件都没有加载出来。
而打开html的源码，可以发下报错的第一行，只是一个html的文档类型说明：
<!doctype html>
这个错误有点莫名其妙，而且接下来的错误$未定义，明显是jQuery的js未加载执行。
在html这个报错上纠结了一会之后，发现应该不是这里的原因，通过GoogleResource interpreted as Stylesheet but transferred with MIME type text/html 这个错误，找到了原因，是因为我写了一个Filter，未将该页面配置为不进行拦截，导致所有的资源文件都被拦截，最终出现了如上所述的错误。
通过修改Filter的配置文件，将本页面相关的资源跳过，再次访问就没有问题了。
分析原因，应该是Chrome去服务器拉取资源时，被Filter拦截了请求，未能获取到资源，从而导致了上面所说的比较诡异的错误。
扫一扫
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
