浏览器控制台报错:Cross origin requests are only supported for protocol schemes

2023-10-31

浏览器控制台报错:Cross origin requests are only supported for protocol schemes

一、问题

今天写了一个H5 的小demo,然后在浏览器中运行时就报了这个错误。

Access to script at ‘file:///D://test.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

二、原因分析

在js 文件中使用了ES6 的模块化(export、import … from …),以及在index.html 文件中引入模块时,在script 标签中加入属性 type=“module”。

<script src="./main.js" type="module"></script>

这样做本来应该没什么问题的,问题是浏览器在访问本地js 文件的时候遇到了跨域的问题。

我们在本地打开HTML文件时使用的是file 协议:
在这里插入图片描述
但是上面的报错信息提示是:

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

可以看到并没有支持file 协议。

三、解决方法

有两种解决方法:

  • 给浏览器传入启动参数(allow-file-access-from-files),允许跨域访问

    Windows下,打开命令行工具,输入下面命令:

    "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files  
    
  • 使用anywhere(静态文件服务器),可以使用npm 安装

    npm install anywhere -g 
    

    安装好后,切换到index.html 所在的文件夹,运行 anywhere

    anywhere
    也可以自定义端口号
    anywhere -p 8080
    

    运行后会自动跳转到系统默认浏览器上,终端也会显示一个运行的网址

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器控制台报错:Cross origin requests are only supported for protocol schemes 的相关文章

  • 使用 PHP 和 MySQL 的服务器端事件

    我正在使用 PHP 和 MySQL 构建一个 非常基本的 应用程序 该应用程序的目的是在网页上显示 实时 数据交易 这些交易来自于transactionsMySQL 数据库中的表 到目前为止 我可以在网页上检索并显示数据 不过我期待看到数据
  • require('babel/register') 不起作用

    我在客户端上有一个用 ES6 编写的同构应用程序Babel 转译器 http babeljs io 我希望我的 Express 服务器具有与客户端代码相同的 ES6 语法 很遗憾require babel register 不起作用 服务器
  • 在 iPad 上调试 Javascript

    我想知道人们是否找到了任何有用的工具来在未越狱的 iPad 上调试 javascript 这是一款用于工作的 iPad 因此无法越狱 通过一些繁琐的步骤 我已经在 iPad 上运行了 firebug lite 但是我的 javascript
  • 共享工作线程在重新加载页面时终止

    为什么 Shared Worker 在重新加载页面时死掉了 应该是复活了我该如何解决这个问题 重新加载前 重新加载后 在 example com 上按 F5 家长工人 var port new SharedWorker app worker
  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • 如何针对 IE 进行优化?

    我有一个 JS 密集型应用程序 它在 IE 中运行缓慢 我将花费大约一周的时间来优化 IE 并且我想要一些关于尝试的方向 我发现这个线程引用Drip https ieleak svn sourceforge net svnroot iele
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • 如何从对象数组中删除所有重复项?

    This is a large array of objects e g let totalArray id rec01dTDP9T4ZtHL4 fields user id 170180717 user name abcdefg even
  • 如何将节点 sqlite3 与 q (promise) 一起使用

    我正在尝试将 Promise 与 sqlite3 一起使用 这是我的源代码的一部分 this deleteTag function tag project var db this db if project return q nfcall
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 光标:IE 8 和 9 中的自动行为

    我想要的是为整个正文标记指定cursor pointer 这样页面的背景是可点击的 但我也希望页面的其余部分像以前一样工作 所以我尝试为div设置cursor auto 其中包含这一页 在 FF Chrome 和 safari 中 它工作得
  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon
  • 在each() 和forEach() 中使用break 和 continue

    如果我们不能使用 break 和 continue 关键字 我不确定我是否理解函数式循环 映射的价值 我可以做这个 collections users models forEach function item index can t use
  • Google 地图 Javascript v3 折线点击事件

    我正在尝试显示一张地图 其中有多条路线布置为折线 单击多段线时 我想显示特定于该线的数据 将数据与线关联不是问题 但无论单击哪条线 显示的数据都会与最近绘制的线关联 就好像每条新折线都会覆盖最后一条线一样 我有一个数据库 其中包含 gpx
  • JavaScript/jQuery - “$ 未定义 - $function()”错误

    我正在尝试运行 JavaScript jQuery 函数并且Firebug http en wikipedia org wiki Firebug 28software 29得到错误 is not defined function JavaS
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • 如何使用 Node.js 解析 JSON? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我应该如何使用 Node js 解析 JSON 是否有一些模块可以安全地验证和解析 JSON 你可以简单地使用JSON parse h
  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值?

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto

随机推荐