如何解决错误“对于 CORS 请求，URL 方案必须是“http”或“https”。”对于此代码[重复]

Posted 2023-02-22

【中文标题】如何解决错误“对于 CORS 请求，URL 方案必须是“http”或“https”。”对于此代码[重复]

【英文标题】：How can I resolve the error "URL scheme must be "http" or "https" for CORS request." for this code [duplicate]

【发布时间】：2020-01-27 09:47:53

【问题描述】：

它在console 中显示以下消息。

sandbox.js:1 Fetch API 无法加载 file:///C:/Users/Lizzi/Desktop/novice%20to%20ninja/todos/luigi.json。 对于 CORS 请求，URL 方案必须是“http”或“https”

我是 aynchronouse 编程的新手，但我已经阅读了 CORS 解决方案，并尝试了一些方法，例如为我的 google chrome 获取 chrome 扩展和禁用网络安全，但它仍然不起作用。

fetch('todos/luigi.json').then((response)=>
  console.log('resolved',response);
).catch((err)=>
    console.log('rejected', err);
);

【问题讨论】：

您是否尝试过在 fetch 中使用完整的 url？

“为我的 google chrome 禁用网络安全” 不要那样做，如果你在浏览器中做任何其他事情，它会带来巨大的风险。无论如何：您不能从本地文件向其他本地文件发出 Fetch/XHR 请求，因此您需要以某种方式启动本地服务器，例如可能使用 Python (python -m http.server) 或 XAMPP。

怎么样？确保 url 方案 是 http 或 https - 答案在错误中

只要你只是玩一点 fetch 就可以暂时禁用 CORS。看看骗子，看看如何。但是，请务必确保在测试后重新启用它（重新启动浏览器）。从长远来看，托管一个小型测试服务器（本地或远程）可能是一个好主意。

它适用于完整的网址。

【参考方案1】：

您需要在本地提供您的 index.html 或将您的网站托管在某处的实时服务器上，以便 Fetch API 正常工作。需要使用 http 或 https 协议来提供文件。

如果您只是从文件资源管理器中单击 index.html，那么您的浏览器会直接从文件系统中获取这些文件。这就是错误向您显示计算机上根文件夹的绝对路径的原因。

尝试安装其中一个... - npm 服务 - 实时服务器（Visual Studio Code 的扩展，如果你正在使用它）

或任何适合您环境的服务器。

启动服务器后应该可以正常工作 :) 快乐编码！

【讨论】：

You dont need to spin up a server 如果您已启用 file:// 请求

@Hashbrown 怎么办？

@Hashbrown如何启用file://请求？

@YingStyle Hashbrown 链接的答案解释了它。 Fetch 不支持 Chrome 上的 file://，但他发布了一个解决方法，因为 XMLHttpRequest 有效（如果您 --allow-file-access-from-files）。顺便说一句：如果您在 about:config 中设置了 privacy.file_unique_origin=false，Firefox 允许 file:// 使用 fetch

我在 Visual Studio 代码中使用 liveserver。它有效！您需要安装 LiveServer 扩展，然后右键单击您的 HTML 文件以运行访问页面，例如 localhost:5500