解决浏览器ajax请求本地文件报错问题

近来在拆衡吵做自己的UI库的时候，遇到一个问题，浏览器发送的ajax请求本地文件，会报跨域错误。报错如下：

XMLHttpRequest cannot load file:///xxx

Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

解决方案如下：chrome添加启动参数：--allow-file-access-from-files ，这样本地ajax请求就不会报跨旅侍域错误了。注意每个启动参数“--”之前要有空格隔开。

做法：

找到谷歌浏览器启动程序exe，发送快捷方式到桌面，在桌面右击谷歌浏览器，选择属性，点击快捷方式选项卡，在目标字段后添加启动参数：--allow-file-access-from-files，修拦饥改完成后点击确定即可。重启浏览器就不会报错了。

具体 *** 作如下图：

使用ajax请求本地md文件

注意1，如果是颂中局POST请求，要设置请求头，因为xhr ajax默认content-type是text/plain，而一般ajax请求或者表单的content-type是application/x-www-form-urlencoded，要注意后端可以解析的content-type格式

关于ajax content-type详细内容看这里 传送门

注意2，XMLHttpRequest在IE8以下不兼容，IE8以下使用ajax的方法是ActiveXObject('Microsoft.XMLHttp')，所以可以做一下兼容：

当然也可以用try-catch

执行结果是：

在JavaScript中解析markdown需要用到一些js解析库，目前比较流行的是marked.js和showdown.js 二者比较

根据github上的star和bootcdn上的使用情况，选择marked作为解析库

解析结果：(红色部分是引用，也就是md语法">")

结果显而易见，没有样式

所以接下来要布置一下md渲野让染的样式，这里采用 github-markdown-css ，同时将展示md内容的标签附上样式class="markdown-body"，渲染结果如下：

经过上面三步，已经可以成功请求到本地的markdown文件。回过头来看整个过培核程，觉得xhr ajax请求应该封装成一个外部函数来调用。

---