html文件引入本地js出现跨域

最新推荐文章于 2023-05-12 18:13:31 发布
最新推荐文章于 2023-05-12 18:13:31 发布
阅读量1.8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaosama/article/details/104932845
版权

简单来说其实就是浏览器加载js文件时使用了file协议，而浏览器只相信来自http或者https的，所以才会出现这种跨域问题

简单来说如果把该文件丢到一个微型web服务器里面就不会有这种问题，你可以node就有很简单的模型

当然，怕麻烦的可以直接下载webstorm，右键该html直接run也是OK的，默认等同一个微型web服务

chaosama
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决ajax不能访问本地文件问题（利用js跨域原理）
10-20
之后，在HTML中引入这个`abc.js`文件，因为这是通过`<script>`标签加载的，所以不受同源策略限制。 接下来，可以编写一个函数来解析这个JavaScript对象。在示例代码中，定义了一个`fun`函数，它接收`abc.pro`作为...
nodejs搭建本地服务器轻松解决跨域问题
10-18
在本文中，我们将深入探讨如何使用Node.js搭建本地服务器来轻松解决跨域问题。跨域问题通常发生在浏览器的安全策略之下，限制了JavaScript从一个源（协议+域名+端口）发送Ajax请求到另一个源。然而，开发过程中经常...
html文件引用本地js文件出现跨域问题的解决方案
grfstc的博客
03-30 3485
在本地做个小demo，很简单，一个html文件，一个js文件，在html文件中通过<script>标签引入js，但是无法渲染。 　　一番折腾后，终于弄明白了：加载js文件时使用了file协议，该协议会导致跨域，而使用htpp、https等协议时则没有跨域问题。而使用file协议则是因为在浏览器中查看html文件时没有起服务！平时使用webstorm时会自动起服务，所以没有注意到这个问题。 　　解决方法是安装anywhere npm包，在命令行中执行命令 $ anywhere即可启动.
在本地打开HTML网页时，可能会出现资源加载跨域的问题
qq_43509445的博客
04-20 2858
在本地打开HTML网页时，可能会出现资源加载跨域的问题
跨域问题及html引用JavaScript脚本问题
tianyexing2008的博客
12-16 2164
loginbtn 没有定义，这个是一个函数，是我定义在js文件的函数，这个函数绑定到了 “登录” 按钮的 onclick 事件上，我的目的就是点击 “登录” 的时候，向服务器 POST 操作。直接在本地执行是不对的，肯定会出现跨域问题，真是第一次搞这个前端开发，啥也不懂啊，网上搜索了一番，需要从服务器返回一个 html 的文件，然后浏览器解析后再进行操作的。所以还是服务端程序的问题。浏览器来请求 login.js 的时候，服务器却应答了 “data”:"test" 的内容。这样才能接着往下添加新的功能了。
JavaScript html加载本地js文件出现跨域问题
weixin_43815222的博客
08-27 2602
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 浏览器
html前端跨域问题的解决方案
weixin_41883890的博客
11-15 5577
来，我们解释一下：首先通过第一个script脚本注册一个函数f，那么这个函数自然就存在了，后面使用的脚本也能用f这个函数，这个道理和你用script引入一个jquery然后后面用 $ 开始一通操作是一样的道理。但是但是前端这个时候注册了一个f函数呀，所以就会执行这个f(‘你好’)，那么前端的数据也就请求回来了。首先是前端：使用ajax发送get请求，请求地址为http://127.0.0.1/api/get，由于前端页面使用file格式打开，所以在请求http协议的本机地址是会产生跨域问题。
js的跨域问题及若干解决方案
weixin_44383261的博客
06-01 1193
跨域 跨域也叫非同源策略，简单理解就是从一个地址去请求另一地址的资源，我们知道，url地址包含协议、域名和端口号，两个地址中的这三者只要有一个不同，就属于跨域。 我们可以在自己的电脑上模拟跨域，比如，搭建一个前后端分离的项目，前端主页的请求地址是http://120.0.0.1:8000，后端的数据接口地址设置为http://120.0.0.1:8001。显然，两个地址的端口号不一致，由此产生跨域。 解决方案 1.利用JSONP解决 html中有些标签本身就可以实现跨域，它们不存在跨域请求限制。比如：scr
利用jsonp解决js读取本地json跨域的问题
10-17
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中，由于同源策略的限制，AJAX无法直接从本地文件系统获取JSON数据。然而，JSONP（JSON with Padding）是一种绕过同源策略的技术，尤其适用于GET...
HTML5 Video/Audio播放本地文件示例介绍
09-28
然而，通过HTML5引入的一些特性，开发者可以在用户许可的情况下播放本地的音频或视频文件。 首先，我们需要理解为什么不能直接通过设置`src`属性播放本地文件。这主要是因为浏览器的同源策略（Same-origin policy）...
跨域的三个html例子
10-18
跨域的三个html例子 可是实现静态跨域
IOS WKWebView无法打开本地资源js/css/image.rar
06-14
IOS WKWebView无法打开本地资源JS/CSS/Image,解决跨域问题 本人亲自编写,可以加载本地网站,如cocos creator发布的网页直接在本地打开 能够正确加载js,css/image等
快速解决vue中js引入跨域问题
qq_43704742的博客
11-14 1705
Access to script at 'file:///.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. index.html:12 GET file:///******************
html中动态加载js文件
weixin_44178072的博客
05-12 1732
getScript函数可以请求js文件并加载，本质为ajax请求。
HTML 引入 JS 文件
weixin_46774901的博客
03-28 6110
1、页头引入（head 标签内）；2、页中引入（body 标签内）；3、引入外部 JS 文件；
Jquery的load加载本地文件出现跨域错误的解决方案
weixin_30535167的博客
05-06 1857
如果用原生的AJAX是加载本地文件就不会出现错误。当然，这个jquery的load放在服务器上通过http加载还是支持的。也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或txt文件时,不会报错。 当其他浏览器控制台弹出下面报错，表明这个不支持跨域浏览本地文件： Access to XMLHttpRequest at 'file:///F:/%E4%BB%A3%E7...
静态页面调试JS出现跨域问题
weixin_43835827的博客
07-14 547
在chrome浏览器或者firefox浏览器里，由于安全限制的原因，本地调试JS，如果不配服务器环境而直接打开页面，那所有的AJAX操作会抛出下面错误： XMLHttpRequest cannot load file:///D:/file.html. Origin null is not allowed by Access-Control-Allow-Origin. Origin null is not allowed by Access-Control-Allow-Origin. 的意思就是由于安全原
静态HTML页面直接在浏览器打开，js操作出现跨域问题
why_book的博客
06-06 2175
环境 谷歌浏览器 解决方式 Chrome快捷图标，右键 -> 目标，在末尾加上–disable-web-security重启浏览器。 别忘了加空格 可能会出现修改后第一次有效，刷新页面后再次出现跨域。我的原因是Chrome浏览器提示翻译的影响，关闭后解决。 ...
使用ES6模块化import本地js文件出现跨域问题的解决方式
Sherry0425的博客
06-07 3453
Access to script at ‘file:///C:/Users/Administrator/Desktop/Vue/11-%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91/02-ES6%E6%A8%A1%E5%9D%97%E5%8C%96/aaaa.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for pr.
5+app 纯js 上传本地文件至腾讯云
最新发布
05-22
要在网页上实现上传本地文件至腾讯云，需要使用腾讯云的对象存储服务 COS，并且需要用到 COS 的 JavaScript SDK。以下是一个基本的上传示例： 1. 在腾讯云 COS 控制台创建存储桶，并获取存储桶的名称和访问密钥 ID 和密钥。 2. 在 HTML 中添加一个文件上传的表单： ```html <form> <input type="file" id="file-input"> <button type="submit" id="upload-btn">上传</button> </form> ``` 3. 在 JavaScript 中，引入 COS SDK 并初始化： ```javascript const COS = require('cos-js-sdk-v5'); const cos = new COS({ SecretId: 'your-secret-id', SecretKey: 'your-secret-key', }); ``` 4. 监听表单提交事件，获取上传的文件并调用 COS SDK 的 `putObject` 方法上传： ```javascript const form = document.querySelector('form'); const fileInput = document.querySelector('#file-input'); const uploadBtn = document.querySelector('#upload-btn'); form.addEventListener('submit', (e) => { e.preventDefault(); const file = fileInput.files[0]; const key = file.name; cos.putObject({ Bucket: 'your-bucket-name', Region: 'your-bucket-region', Key: key, Body: file, }, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); }); ``` 其中 `Bucket` 是存储桶名称，`Region` 是存储桶所在的地区，`Key` 是文件名，`Body` 是文件对象。 需要注意的是，由于腾讯云 COS 支持跨域上传，因此可以直接在前端使用 JavaScript 上传文件。不过这种方式需要将密钥直接暴露在前端代码中，存在安全风险，因此建议在服务端实现上传，并通过 API 提供给前端调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值