在本地做个小demo,很简单,一个html文件,一个js文件,在html文件中通过<script>标签引入js,但是出现了一个意想不到的问题:浏览器报错——

  一番折腾后,终于弄明白了:加载js文件时使用了file协议,该协议会导致跨域,而使用htpp、https等协议时则没有跨域问题。而使用file协议则是因为在浏览器中查看html文件时没有起服务!平时使用webstorm时会自动起服务,所以没有注意到这个问题。

  解决方法是安装anywhere npm包,在命令行中执行命令 $ anywhere即可启动服务,然后可以在浏览器中使用http协议来访问html和js,就不会再报跨域错误。

$ npm i anywhere
//进入html文件所在文件夹
$ anywhere

  Anywhere —— 随启随用的静态文件服务器

  Running static file server anywhere. 随时随地将你的当前目录变成一个静态文件服务器的根目录。

html文件引用本地js文件出现跨域问题的解决方案的更多相关文章

  1. Python+Django+js+echarts引入本地js文件的操作方法

    1. 选择正确的echarts.js,开发版选择echarts.baidu.com上的源码版,避免出现问题 2. 在项目主目录中新建static文件夹,里面建立js.css.images文件夹 3. ...

  2. Jquery的load加载本地文件出现跨域错误的解决方案"Access to XMLHttpRequest at 'file:///android_asset/web/graph.json' from(Day_46)

    博主是通过JS调用本地的一个json文件赋值给变量出现的跨域错误, 网上有大量文章,五花八门的,但总归,一般性此问题基本可通过这三种方法解决: https://blog.csdn.net/qq_418 ...

  3. chrome调试本地项目, 引用本地javascript文件

    chrome调试本地项目, 引用本地javascript文件 本地文件可以访问本地文件 修改快捷方式属性 C:\Users\xxx\AppData\Local\Google\Chrome\Applic ...

  4. JS引用另外JS文件的顺序问题。

    1.在a.js中可以引用b.js文件,这样就可以在网页中只引用a.js文件,从而可以使用a.js和b.js文件中的所有方法. 引用格式如下:document.write('<script typ ...

  5. node.js如何引用其它js文件

    以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...

  6. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  7. 小程序-引用其他js文件

    我也是小白菜,之所以有这个记录是因为我做项目时遇到了这个问题 流程: 1.需要建立一个js文件   content.js function myContent() { console.log(&quo ...

  8. vscode编写python,引用本地py文件出现红色波浪线

    前言 引用本地py文件出现红色波浪线,如下图: 原因 经过查询得知,vscode中的python插件默认使用的是pylint来做代码检查,因此需要对pylint做一些配置 解决方案 在setting. ...

  9. FineUIPro中如何支持多语言(全局资源文件和本地资源文件)

    一个客户在邮件中问到了FineUIPro的多语言实现问题,其实 FineUIPro 并没有对此做特殊处理,因此直接使用 ASP.NET 原生支持的资源文件就能实现. 下面我们就以FineUIPro的空 ...

随机推荐

  1. GitLab修改时区

    https://yq.aliyun.com/articles/275765 一.背景 今天有同事在GitLab上查看时间的时候,发现GitLab上显示的时间和提交的时间不一致. 本地时间现在为:201 ...

  2. 前端 HTML的规范

    1.编写HTML规范 1)所有标记元素都要正确的嵌套,不能交叉嵌套.正确写法举例:<h1><font></font></h1> (2)HTML标签通常是 ...

  3. 扩展的friend语法

    Java中没有定义friend. friend用于声明类的友元,可以无视类中成员的属性.无论成员3p中的哪一种,友元类或友元函数都可以访问,破坏了封装性,此关键字备受争议.专家会建议程序员使用get/ ...

  4. ElasticSearch排序Java api简单Demo

    代码: String time1 = ConstValue.GetCurrentDate(); SortBuilder sortBuilder = SortBuilders.fieldSort(&qu ...

  5. 015-awk

    1.awk的处理方式: 一次处理一行. 对每行可以进行切片处理,针对字段处理.2.awk的格式: awk BEGIN{循环之前初始化} [options] 'command' END{循环之后结尾} ...

  6. STA分析(五) parastics

    互联线的寄生参数 一般一个cell或者block的连接pin就叫做一个net.在物理实现的时候,一条net可能会穿过几层metal,因为每个metal层的电阻,电容值都不一样.所以,在分析 net的寄 ...

  7. linux常用命令:chmod 命令

    chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法. Linux系统中的每 ...

  8. Hive配置文件中配置项的含义详解(收藏版)

    这里面列出了hive几乎所有的配置项,下面问题只是说出了几种配置项目的作用.更多内容,可以查看内容 问题导读: 1.hive输出格式的配置项是哪个? 2.hive被各种语言调用如何配置? 3.hive ...

  9. python webdriver api-读取、设置配置文件

    文件结构: db.ini放置db信息的配置文件 文件中[gloryroad]是section信息 下边的dbname等是option信息 UiObjectMap.ini放置访问web的配置信息 配置用 ...

  10. Linux中Postfix邮件接收配置(四)

    Dovecot介绍 MRA邮件取回代理也有很多如courier-imap,cyrus-imap和dovecot这三个个工具,下面重点介绍Dovecot: 1.高安全性.据 Dovecot 的作者声称, ...