html js加载本地文件报错处理，跨域问题

原创 于 2024-01-03 11:30:11 发布 · 2k 阅读 · 10 ·
CC 4.0 BY-SA版权
博主新建的qq群：1025127672，欢迎入群讨论
文章标签：

#javascript #跨域 #three.js #html #本地文件

作者遇到在本地使用three.js加载HTML文件时的跨域错误，通过搭建本地服务器和安装live-server解决了问题。此外，还提到如何实现实时更新修改后的HTML内容。

这个问题是怎么来的？我写了一个本地html文件，里面通过three.js加载并显示一个本地三维模型，结果报错了。

报错如下：

Access to XMLHttpRequest at 'file:///C:/model/quater.mtl' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

没玩过前端，看到这个错误不知道从何下手，查了半天了解到大体意思就是：

浏览器html加载本地资源文件，会被阻止。解决方法是搭建一个本地服务器，然后从这个服务器访问这个html文件，这样html和其他资源文件，会被浏览器判定为同一个域。

从这里找到一个解决方法：

Three.js教程

首先下载node.js的windows安装包，安装完以后，打开命令行，查询两个版本号，如果没有报错，就说明node.js和npm都安装好了。

最低0.47元/天 解锁文章
JavaScript代码在浏览器中无法显示怎么办？
TechChamp的博客
10-03 1241
你可以在浏览器的设置中查找相关选项，并确保已启用JavaScript。当我们在编写JavaScript代码并在浏览器中运行时，有时会遇到代码无法显示在浏览器中的情况。通过以上方法，你应该能够解决JavaScript代码无法显示在浏览器中的问题。下面是一个简单的示例，演示了如何在HTML文件中正确嵌入JavaScript代码，并在浏览器中显示一个"Hello, World!确保你的JavaScript代码是正确嵌入在HTML文件中的。// 在这里编写你的JavaScript代码。（Mac）来打开开发者工具。
2024年最新基于VUE的Cesium加载本地地图跨域问题解决方案，拼多多面试官
2401_84446787的博客
05-15 720
pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}‘，被转换成’http://localhost:3000/satellite/z={z}&x={x}&y={y}’拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！好好的准备一下简历，毕竟是找工作的敲门砖。
html前端跨域问题的解决方案
weixin_41883890的博客
11-15 6899
来，我们解释一下：首先通过第一个script脚本注册一个函数f，那么这个函数自然就存在了，后面使用的脚本也能用f这个函数，这个道理和你用script引入一个jquery然后后面用 $ 开始一通操作是一样的道理。但是但是前端这个时候注册了一个f函数呀，所以就会执行这个f(‘你好’)，那么前端的数据也就请求回来了。首先是前端：使用ajax发送get请求，请求地址为http://127.0.0.1/api/get，由于前端页面使用file格式打开，所以在请求http协议的本机地址是会产生跨域问题。
利用jsonp解决js读取本地json跨域的问题
fdsjiaoDoctor的博客
09-23 1122
本文主要给大家介绍了关于使用jsonp解决js读取本地json跨域的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 一 、问题描述 通过ajax方式读取本地json文件，谷歌浏览器会提示跨域错误，导致获取不到json数据。 跨域报错.png ajax获取json数据代码： $.ajax({ url: “file/employeejson.json”,//json文件位置 type: “GET”,//请求方式为get dataType: “json”, //返回数据格式为json s
解决ajax不能访问本地文件问题（利用js跨域原理）
10-20
本篇文章主要介绍了解决ajax不能访问本地文件问题（利用js跨域原理），具有一定的参考价值，有兴趣的可以了解一下。
html静态页面，实现跨域访问
05-16
请用google浏览器打开，页面百分比缩小到百分之三十再访问。 1、 请在服务器上部署附件war 2、 将【两个工程.zip】压缩包中的webChart.war和jdbc2json.war上传至apache-tomcat-8.0.33/webapps下 3、 启动tomcat，~/apache-tomcat-8.0.33/bin/start.sh
js 读取本地文件遇到ajax跨域问题
cihai4502的博客
09-04 907
环境：win10 语言：js 对象：easyUI SKD demo 级别：小小白级 本篇博文记录博主从js小小白的进化历程，下述问题对老鸟来说再简单不过，但是作为新手一定会经历这样的阶段，所以还是分享出来，希望能为以后同样是小小白的猿一些参考。老鸟看看笑笑就行，轻喷轻喷......
JavaScript html加载本地js文件出现跨域问题
weixin_43815222的博客
08-27 2988
JavaScript html加载本地js文件出现跨域问题 const modelUrl = './model.json' async function fun(){ const model = await tf.loadGraphModel(modelUrl); const zeros = tf.zeros([1, 224, 224, 3]); model.predict(zeros).print(); } fun() 加载本地model.json时出现跨域问题 解决方案： 1 浏览器
cesium跨域加载问题
02-20
然而，当使用Cesium进行3D地球渲染时，我们可能需要加载来自不同源的数据，如瓦片、模型、纹理等，这就涉及到跨域问题。本篇文章将详细介绍如何解决Cesium在使用Tomcat服务器时的跨域问题。 首先，我们需要理解...
在本地打开HTML网页时，可能会出现资源加载跨域的问题
qq_43509445的博客
04-20 4479
在本地打开HTML网页时，可能会出现资源加载跨域的问题
【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协议只能在本地访问，且这个访问只是
html文件引入本地js出现跨域
chaosama的博客
03-17 2066
简单来说其实就是浏览器加载js文件时使用了file协议，而浏览器只相信来自http或者https的，所以才会出现这种跨域问题 简单来说如果把该文件丢到一个微型web服务器里面就不会有这种问题，你可以node就有很简单的模型 当然，怕麻烦的可以直接下载webstorm，右键该html直接run也是OK的，默认等同一个微型web服务 ...
解决html访问本地数据时出现的跨域问题
qq_41970098的博客
04-07 3709
问题： 由于现在有很多好用的网页可视化工具，经常需要加载本地的数据来进行绘制网页，但是直接使用ajax访问时会提示has been blocked by CORS policy.因此查询可用的方法。 解决办法： 1.使用jsonp解决跨域 （仅适用于GET请求） <script> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。 所以 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段
Javascript_浏览器访问本地文件跨域问题及解决方法
bruce_zhao1407的博客
12-14 6862
Javascript 浏览器访问本地文件跨域问题及解决方法
Jquery的load加载本地文件出现跨域错误的解决方案
weixin_30535167的博客
05-06 1963
如果用原生的AJAX是加载本地文件就不会出现错误。当然，这个jquery的load放在服务器上通过http加载还是支持的。也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或txt文件时,不会报错。 当其他浏览器控制台弹出下面报错，表明这个不支持跨域浏览本地文件： Access to XMLHttpRequest at 'file:///F:/%E4%BB%A3%E7...
js访问本地文件跨域，html文件访问跨域报错
qq_43305958的博客
08-18 4490
js访问本地文件跨域，html文件访问跨域报错一、什么是跨域？1.什么是同源策略二、解决方案1.webstorm自动开启Web服务2.vscode需要安装插件live service2.用edge浏览器打开总结 一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 1.什么是同源策略 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是
跨域问题及html引用JavaScript脚本问题
tianyexing2008的博客
12-16 2582
loginbtn 没有定义，这个是一个函数，是我定义在js文件的函数，这个函数绑定到了 “登录” 按钮的 onclick 事件上，我的目的就是点击 “登录” 的时候，向服务器 POST 操作。直接在本地执行是不对的，肯定会出现跨域问题，真是第一次搞这个前端开发，啥也不懂啊，网上搜索了一番，需要从服务器返回一个 html 的文件，然后浏览器解析后再进行操作的。所以还是服务端程序的问题。浏览器来请求 login.js 的时候，服务器却应答了 “data”:"test" 的内容。这样才能接着往下添加新的功能了。
加载本地HTML文件
xiu_yun的博客
04-01 1921
当我们加载一个本地HTML文件的时候，一个文件夹里还有css , js ,image文件，所以单独加载一个html文件会没有图片，只有文字，解决方案如下： 代码加载部分 NSString *pathStr = [[NSBundle mainBundle] pathForResource:@"go-live" ofType:@"html" inDirectory:@"record"];//注
前端打包完成index.html双击打开之后报错跨域问题
最新发布
08-06
在前端打包完成后，双击打开 `index.html` 文件时出现跨域错误，主要是由于浏览器的安全机制限制了本地文件（`file://` 协议）的访问权限。以下是一些解决方案： 1. **使用本地服务器运行打包文件** 不建议直接通过双击打开 `index.html` 文件，因为这种方式容易引发跨域问题。可以通过安装 **Live Server** 插件（如 VS Code 的 Live Server 插件）运行打包后的文件。该插件会在本地启动一个 HTTP 服务器，从而避免 `file://` 协议带来的限制。 2. **修改 Vite 配置以支持本地文件访问** 如果使用的是 Vite 构建工具，可以在 `vite.config.js` 文件中添加 `@vitejs/plugin-legacy` 插件，并设置 `base: './'` 以确保资源路径正确加载。此外，将 Vue Router 的 `history` 模式改为 `hash` 模式，有助于避免路径问题导致的空白页面和跨域错误。 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ vue(), legacy({ targets: ['ie>=11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }) ], base: './' }) ``` 3. **修改 `index.html` 文件中的脚本标签** 在打包生成的 `index.html` 文件中，删除 `<script>` 标签中的 `type="module"`、`nomodule` 和 `crossorigin` 属性，并将 `data-src` 替换为 `src`。这样可以避免浏览器因模块加载问题而报错。 4. **使用支持本地文件访问的浏览器** 某些浏览器（如 Chrome）允许通过命令行参数禁用安全限制，以便测试本地文件。例如，可以通过以下命令启动 Chrome： ``` chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession" ``` 但这种方式仅适用于开发和测试环境，不建议在生产环境中使用。 5. **调整服务器配置** 如果需要将项目部署到服务器的二级文件夹中，确保服务器配置正确，以便支持静态资源的正确加载。通常情况下，Vite 的默认配置已经足够支持大多数服务器环境。 通过以上方法，可以有效解决前端打包生成的 `index.html` 文件在双击打开时遇到的跨域问题。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值