首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >file 协议导致的跨域问题以及解决方案

file 协议导致的跨域问题以及解决方案

作者头像
Chor
发布2019-11-07 17:41:43
10.1K1
发布2019-11-07 17:41:43
举报
文章被收录于专栏:前端之旅前端之旅

问题复现: 学习 ES6 模块化的时候,写了这段代码:

<script src="./aaa.js" type="module"></script>
<script src="./bbb.js" type="module"></script>
<script src="./aaa2.js" type="module"></script>

结果跑到 chrome 下面一看,报错了:

看起来是跨域问题,也就是只支持 httphttps 等这种类型的跨域请求,不支持 file 协议类型的(直接本地打开文件)。解决方案如下:

1.给 chrome 快捷方式添加参数: –allow-file-access-from-files 实测无效。貌似还得重启电脑,太麻烦了,遂放弃。

2.换浏览器。经过测试,Edge 可以正常显示,但 FireFox 还是报跨域错误:

3.用 IDE。像 Webstrom 这类型的 IDE 是内置 http 服务器的,这样可以不通过 file 协议打开文件,不过这个还是有点麻烦,我没尝试。

4.使用热更新插件。刚好想起编辑器里安装了 live server 这个插件,这个其实是做同步刷新用的,但是由于它可以在本地开启一个服务器,所以可以利用这一点(localhost 访问)。尝试之后发现确实不报错了。

5.Node 开一个服务器

// server.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.get('/',function (req,res) {
    res.send('./index.html',{root:__dirname});
})
app.listen(8203);

问题是解决了,但总觉得心里不踏实,所以开始了艰苦的 google 之旅,最后算是找到了问题的根源。但我还是想从同源策略开始解释:

同源策略(Same origin policy),是出于安全而诞生的一种约定,规定了只能在本域内进行资源访问。所谓同源是指”协议+域名+端口”三者相同。

不同源之间进行资源访问,就需要跨域。特殊地,有三个标签默认是允许跨域加载资源的:

  • <img src="xxx">
  • <link href="xxx">
  • <script src="xxx">

关键来了,ES6 使用模块的时候要在标签中声明 type="module",而这类使用了模块的 script 是受限于同源策略的。我们尝试改动之前的代码如下:

<script src="./aaa.js" type="module" defer="defer"></script>
<script src="./bbb.js" type="module" defer="defer"></script>
<script src="./ccc.js" type="text/javascript" defer="defer"></script>

可以看到,前面两个 script 使用了模块,Sec-Fetch-Mode 都是 cors,而最后一个就是常规的引入脚本,不受同源策略影响,因此是 no-cors

我们可以理解为前两个 scirpt 发送了 Cors 跨域资源请求,而这种请求要求 request header 的 origin 必须合法 —— 也就是必须带有 httphttps 等,以用来表明请求源。

但是别忘了,我们现在是在本地打开文件,使用的不是 http 协议,而是 file 协议,它根本就没有跨域请求需要的 origin(注意看上图,origin 是空的)。所以,这种情况就要报错了。其实从报错信息中也能读出这一点。

那么,我们现在用 live server 在本地开启服务器,再看一下控制台:

可以看到,因为这次不是用 file 协议访问了,所以一切正常。

参考: Understanding ES6 Modules ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error Access to Image from origin ‘null’ has been blocked by CORS policy

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-10-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档