问题：

Chrome-Fetch API无法加载文件。如何变通？

陈欣荣

2023-03-14

我有以下两个文件：

index.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>

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.

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

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)

chrome://flags/

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)

谢谢！

范修伟

2023-03-14

对于chrome，您仍然需要--allow-file-access-from-files（我建议安装一个单独的chrome并仅用于这些项目以保持安全），但只需为XMLHttpRequest填充fetch()以填充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语句），
对任何未指定协议的url（因此也未指定非文件：//请求）调用普通fetch()，以及
将用相对于当前路径的路径替换绝对路径(/root/bob.html)（因为这将危险地计算为C:\或等效路径）

如果index.html实际上不在项目的根目录中，则将path设置为其他内容。
如果需要对init或text()以外的任何内容的支持，则需要添加它。
显式file:/请求将不会得到满足，这是故意的，但如果您确实知道自己在做什么，您就会知道如何使其工作，如果不知道，就不应该这样做。

如果您要对多个文件执行此操作，以下内容非常有用。将“./”替换为文档.CurrentScript.GetAttribute('data-root')。现在，您可以将该片段放入自己的文件中，例如filesystemhelper.js，并在各种文件中进行类似的调用：

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

很时髦。

Chrome-Fetch API无法加载文件。如何变通？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档