静态HTML文件中引入js跨域报错Cross origin requests are only supported for......

最新推荐文章于 2023-02-01 08:30:00 发布
原创 最新推荐文章于 2023-02-01 08:30:00 发布 · 671 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #js #ajax跨域问题

本文指导如何在VSCode编写HTML时，遇到File协议的跨域问题，通过LiveServer快速配置服务器端口来解决。

本文场景

在使用vs code写html时，引入的js文件需要跨域引入module。

原因

使用了File协议，需要使用http, data, chrome-extension, edge, https等协议，通俗来讲就是需要用到服务器开个端口。

解决方法

直接在vs code中右击，选择Open with Live Server。
在这里插入图片描述

HTML页面安全策略汇总(1)：同源策略、CORS、COOP、COEP
weixin_44384265的博客
12-02 1479
本文是HTML页面安全汇总文章第一篇：详细介绍的策略包括同源策略、跨源资源共享CORS、跨源打开程序策略COOP、跨源嵌入器策略COEP。
解决ajax不能访问本地文件问题（利用js跨域原理）
10-20
本篇文章主要介绍了解决ajax不能访问本地文件问题（利用js跨域原理），具有一定的参考价值，有兴趣的可以了解一下。
Fix:安全策略导致Html中拒绝引用外部js，css
xiaopengyu411的博客
07-06 7138
报错：Refused to load the script 'https://lib.baomitu.com/echarts/5.1.0/echarts.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' localhost js.arcgis.com 222.66.73.172:10043 220.1...
在HTML 中嵌入 JS 代码的三种方式
innocence_123的博客
05-06 1万+
行间事件是指将JavaScript函数写到HTML元素中的执行事件。 1、JavaScript 是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行某段代 码。其中，事件包括很多，例如：鼠标单击事件 click，鼠标经过事件 mouseover 等。并且在 JavaScript 当中任何一个事件都有对应的事件句柄（事件发生时要进行的操作）。 例如：click 对应的事件句柄是 onclick，mouseover 对应的 事件句柄是 onmouseover。 2、怎么使用 JS 代码弹窗？
html文件引入本地js出现跨域
chaosama的博客
03-17 2066
简单来说其实就是浏览器加载js文件时使用了file协议，而浏览器只相信来自http或者https的，所以才会出现这种跨域问题 简单来说如果把该文件丢到一个微型web服务器里面就不会有这种问题，你可以node就有很简单的模型 当然，怕麻烦的可以直接下载webstorm，右键该html直接run也是OK的，默认等同一个微型web服务 ...
【JavaScript】JS引用本地文件CORS跨域问题
丧心病狂Loli控的博客
12-03 4977
场景 Three.js搭建3D场景时，模型贴图加载失败，报错： THREE.TextureLoader() Origin null is not allowed by Access-Control-Allow-Origin     分析 很显然，此时在浏览器上方可以看到file:///——标准的File协议（本地文件传输协议） File协议静态请求本地资源出现跨域，这个请求被禁止。即File协议无法实现跨域。   通俗的说（⭐️）： file协议只能在本地访问，且这个访问只是
from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
09-04
错误信息：`from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-...
origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
05-23
### 跨域请求被CORS策略阻止的原因分析 当尝试通过浏览器加载资源时，如果协议方案（protocol scheme）不符合标准，则会触发跨域资源共享（CORS）错误。具体来说，以下几种情况可能导致此类问题： - **文件协议...
Vue打包就报from origin 'null' has been blocked by CORS policy:Cross origin requests are only supported for protocol schemes：错？
08-06
在使用 Vue 构建前端应用时，尤其是使用 Vite 作为构建工具的情况下，如果直接通过 `file://` 协议打开打包生成的 HTML 文件，可能会遇到浏览器报错：`from origin 'null' has been blocked by CORS policy`。...
vite 打包from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes:
01-01
### Vite 打包后跨域请求被 CORS 策略阻止的解决方案 #### 配置开发环境中的代理服务器 为了防止浏览器在开发环境中发出带有 `origin 'null'` 的请求，可以利用 Vite 提供的内置代理功能来处理跨源资源共享 (CORS) ...
Access to script at 'file:///F:/assets/index-_ObjH8U8.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app
最新发布
09-16
在访问 `file:///F:/assets/index-_ObjH8U8.js` 时被 CORS 策略阻止，是因为 CORS（跨域资源共享）策略默认只支持 `chrome-extension`、`chrome-untrusted`、`data`、`edge`、`http`、`https`、`isolated-app` 等...
html文件引用本地js文件出现跨域问题的解决方案
grfstc的博客
03-30 4251
在本地做个小demo，很简单，一个html文件，一个js文件，在html文件中通过<script>标签引入js，但是无法渲染。 　　一番折腾后，终于弄明白了：加载js文件时使用了file协议，该协议会导致跨域，而使用htpp、https等协议时则没有跨域问题。而使用file协议则是因为在浏览器中查看html文件时没有起服务！平时使用webstorm时会自动起服务，所以没有注意到这个问题。 　　解决方法是安装anywhere npm包，在命令行中执行命令 $ anywhere即可启动.
跨域请求 CORS
qq_41297145的博客
05-16 448
跨域请求失败 跨域的问题，是很多开发人员都要经历过的。 我想，像这样这样的错误你应该已经见过了吧。 Access to XMLHttpRequest at ‘http://localhost:8083/g628/About/Get.php’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the request
HTML引入外部的JavaScript文件
AKGWSB 's blog
04-16 1万+
这个测试案例是基于上一次写的【反转字符串网页】 我们总是希望结构和流程控制互相分离，所以将一个js文件写在外部，以强调其可复用性以及使得编程的过程更加清晰 我们有如下的html页面，我们希望给button标签添加onclick的回调函数，而这些回调函数来自外部定义的js文件，并且实时的改变文本框的内容，为此我们需要定义一个js文件 如何获取标签的对象呢？这里直接调用标签的id即可，因为id唯一，或...
前端网络基础 - 跨域xhr/fetch
优快云
02-27 6612
浏览器的同源策略（same-origin policy） 同源策略的影响 目前所有的浏览器都实现了同源策略，该策略主要影响了不同源浏览器缓存间，不同源网页间，或不同源网页与服务器间三个行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 举例： A网页无法获得B网页缓存在浏览器的Cookie、LocalStorage 和 IndexDB信息， A网页无法获得B网页的DOM对象 A网页无法发送AJAX请求到B服务器 同..
解决 strict-origin-when-cross-origin 问题
热门推荐
时间静止
02-01 18万+
使用90版本之后的谷歌浏览器, 在部署前端项目后, 调用后端接口出现 strict-origin-when-cross-origin, 并且静态资源被拦截的情况的解决
引用import的JS报错：Access to script at 'file:' from origin 'null' has been blocked by CORS policy（3种解决手段）
xiao廸要飞
05-12 4万+
直接引用带有import关键字的JS脚本会报错：Access to script at ‘file:’ from origin ‘null’ has been blocked by CORS policy index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
CORS错误，跨域问题的解决
weixin_57396733的博客
04-29 1万+
当我们遇到CORS错误时，往往是跨域造成的 首先，我们需要了解下两个概念 跨域：不同源的ajax请求 同源：发出请求所在的页面 与 所请求的资源的url，协议相同，域名相同，端口相同 都相同。 同源情况 不同源情况 报CORS错误 解决方案，从npm下cors包，然后在我们的代码中添加这样一段代码 ...
ES6 import Export
qq_34153210的博客
01-17 685
这周二遇到了这个module导入问题，过程真的是一言难尽，我把我遇到的问题和解决方式复现一下。 ES6导入导出关键词export和import。比如我有一个类，文件名叫cat.js(实际上类习惯大写开头，这个问题忽略)。内容如下 class cat { constructor(name) { this.name = name; } print(){ ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值