| 引入本地资源跨域问题

问题由来

学习前端上的一些新东西，常常从一个简单的 html 文件开始，然后通过 src、href 引入一些脚本或资源来查看效果。比如，在一个 html 中引入 .less 文件，使用浏览器预览，结果如下图所示：

异常.png

原因呢？

浏览器告诉我跨域了，并且称：CORS 策略只支持这些协议：http、data、 chrome、chrome-extension 以及 https。显然，如果 html 文件中引用了其他资源，直接双击 html 文件、使用 file 协议在浏览器中打开这种方式，不受浏览器 CORS 支持。

普通操作.png

解决方案

兵来将挡，既然是协议的问题，那就转协议。下方高能 >>

使用 Anywhere
anywhere 是一个随启随用的静态服务器，它可以随时随地将当前目录变成一个静态文件服务器的根目录。使用步骤如下：

• 使用 npm 全局安装 anywhere

npm i anywhere -g

• 打开 localhost，开始”冲浪“模式

anywhere -h

此时，便可以像资源管理器一样，可视化预览目录下的一切文件，而且不存在跨域问题，可使用的协议是：http 或 https

dos 窗口.png 沉浸式的体验.png

令人惊喜的是，当上图“新建文件夹”中是这样一堆文件的时候，浏览器自动预览了 .html 文件：

补充

关于 anywhere 的指令：

指令.png

疑问没有中止

尽管上面已经针对某些异常场景给出了完美的方案。我的疑问在于，为什么“裸奔”情况下，href 引入 .css文件 ，src 引入.js 文件，却没有跨域毛病。因缺乏理论支撑，暂时存疑。