[Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案

最新推荐文章于 2022-02-09 18:56:34 发布

转载最新推荐文章于 2022-02-09 18:56:34 发布 · 418 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clark159/p/4688912.html

文章标签：

#javascript #ViewUI

本文介绍了解决Chrome浏览器限制本地网页使用XMLHttpRequest访问本地文件的问题。通过在Chrome启动参数中添加--allow-file-access-from-files，使得开发者能够在Chrome中调试混合应用时，正常利用XMLHttpRequest加载本地资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案

问题情景

开发Cordova这类以网页内容作为UI的Hybrid APP时，开发人员可以使用IDE的功能将程序布署到手机或是仿真器来侦错。但是以笔者的经验来说，要检视HTML网页元素、观看CSS样式继承，最顺手的开发者工具还是Chrome。这时如果开发人员选择透过Chrome来模拟Hybrid APP，以档案方式加载本地网页来侦错，并且在网页里使用了XMLHttpRequest来额外加载本地档案(ex:AngularJS里Route功能的TemplateURL)，在Chrome上会呈现下列的错误讯息：

Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Clark/Desktop/XhrFileAccessSample/content.txt'.

发生这个错误的原因，是因为Chrome基于安全性的考虑，禁止本地网页使用XMLHttpRequest来读取本地档案。这也就造成了相同的HTML页面内容，布署到手机或者仿真器可以正常使用XMLHttpRequest，而在Chrome上执行却无法正常使用XMLHttpRequest。

解决方案

为了让Chrome上执行的本地网页，也能正常使用XMLHttpRequest来读取本地档案内容。开发人员可以在启动Chrome的快捷方式上，加入「--allow-file-access-from-files」参数，来开启XMLHttpRequest读取档案功能。后续使用这个快捷方式开启Chrome执行本地网页，就可以正常使用XMLHttpRequest来读取本地档案内容。

快捷方式设定

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <h1 id="displayBox"></h1>

    <script>

        // DisplayBox
        function display(message) {
            var displayBox = document.getElementById("displayBox");
            displayBox.innerHTML = message;
        }        

        // XMLHttpRequest
        var xhr = new XMLHttpRequest();

        xhr.onload = function () {            
            display(xhr.responseText);
        };

        try {
            xhr.open("get", "content.txt", true);
            xhr.send();
        }
        catch (ex) {
            display(ex.message);
        }        

    </script>
</body>
</html>