Chrome - Fetch API 无法加载文件。如何解决？

IT技术 javascript google-chrome firefox fetch-api file-uri
2021-03-17 20:04:10

我有以下两个文件：

索引.html

<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<style type="text/css">
.text {
    display: inline-block;
    font-family: tahoma;
    font-size: 14px;
    max-width: 400px;
    background-color: #ddedff;
    padding: 10px;
    text-align: justify;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    get_data('info.txt');
});
function get_data(file) {
    var request = new Request(file);
    fetch(request).then(function(response) {
        return response.text().then(function(text) {
            $('.text').html(text);
        });
    });
}
</script>
</head>
<body>
    <div class="text"></div>
</body>
<html>

信息.txt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

当我打开Mozilla Firefox文件时：README.html通过这个本地URI：

file:///C:/testing/README.html

它按预期工作，我的意思是，文件中的文本：info.txt正确显示。

但是当我打开它时，我在控制台URI上Google Chrome看到一个空白屏幕和以下错误：

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme must be "http" or "https" for CORS request.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

你有什么我可以做的，所以我可以Google Chrome像我一样打开本地文件Mozilla Firefox？

如果我必须做一些调整：

chrome://flags/

这对我来说是可以接受的。

编辑

我尝试Google Chrome从带有标志的命令行启动：--allow-file-access-from-files按照此处的建议，但现在出现以下错误：

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme "file" is not supported.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

谢谢！

1个回答

对于铬，你仍然需要--allow-file-access-from-files（我建议安装一个单独的铬和仅使用它的这些项目保持安全性），但只是垫片fetch()用于XMLHttpRequest为file://请求：

if (/^file:\/\/\//.test(location.href)) {
    let path = './';
    let orig = fetch;
    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
        orig(resource) :
        new Promise(function(resolve, reject) {
            let request = new XMLHttpRequest();

            let fail = (error) => {reject(error)};
            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });

            let pull = (expected) => (new Promise((resolve, reject) => {
                if (
                    request.responseType == expected ||
                    (expected == 'text' && !request.responseType)
                )
                    resolve(request.response);
                else
                    reject(request.responseType);
            }));

            request.addEventListener('load', () => (resolve({
                arrayBuffer : () => (pull('arraybuffer')),
                blob        : () => (pull('blob')),
                text        : () => (pull('text')),
                json        : () => (pull('json'))
            })));
            request.open('GET', resource.replace(/^\//, path));
            request.send();
        })
    );
}

这个垫片会；

  • 仅激活本地打开的 html 文件（外部if语句），
  • fetch()为任何未指定协议（因此非file://请求）的url调用法线，以及
  • 将用/root/bob.html相对于当前路径的路径替换绝对路径 ( ) （因为这会危险地评估为C:\或等效）

path如果您index.html实际上不是项目的根，请设置为其他内容。
如果您需要对init或其他任何东西的支持，则text()需要添加它。
明确的file://请求不会被满足，这是故意的，但如果你真的知道你在做什么，你就会知道如何让这对你有用，如果你不知道，你就不应该。

如果您要为多个文件执行此操作，以下内容很有用。'./'换出document.currentScript.getAttribute('data-root'). 现在，您可以将该片段放入其自己的文件中，例如filesystemHelper.js，并在各种文件中像这样调用：

<script src="../filesystemHelper.js" data-root="../"></script>

相当时髦。

请注意，此 shim 有一些限制：它不包括ok其他Response成员。看起来 Windows 上的 Chrome 也不会根据文件扩展名猜测 MIME 类型，至少不是.json
2021-04-21 20:04:10
XMLHttpRequest在 Chrome 中不是也在本地被阻止吗？仍然出现此错误：Access to XMLHttpRequest at 'x' from origin 'null' has been blocked by CORS policy。我做错了吗，或者这不是开箱即用的吗？
2021-04-24 20:04:10
<script>在您的代码运行之前将其粘贴在标签中fetch()
2021-05-09 20:04:10
其它你可能感兴趣的问题
上一篇使用 JavaScript 获取元素的自定义 css 属性 (-mystyle) 下一篇使用 javascript 打开一个新标签，但留在当前标签上