跨域问题一则

问题提出

今天在编写一个简单的html时，遇到了如下问题，html中引入了一个js文件，且html和js位于同一个目录下。

index.html

<html>
  <body>
    <script type="module">
      import add from "./index.js";
      console.log(add(1, 2));
    </script>
  </body>
</html>

index.js

1
2
3

export default function add(a, b) {
  return a + b;
}

当我使用浏览器打开html文件时，Chrome浏览器控制台报错：

Access to script at 'file:///Users/philip/Projects/test.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

查看network tab，发现如下信息，在status一栏，发现跨域错误：CORS error

首先复习一下什么是同源策略
同源策略是浏览器的一个安全功能，它要求一个网页只能与其本身的服务器进行交互，而不能与其他域的服务器进行交互。这样可以防止恶意的网站窃取数据。

从具体的实现来分析，协议，域名，端口号都相同的两个url就是同源的。以https://www.example.com:8080为例，它的组成部分如下：

https: - 协议
www.example.com - 域名
8080 - 端口号

如果省略端口，那么http默认是80，https默认是443。

那么问题来了，为什么我引入的js文件会报错呢？因为浏览器认为这是一个跨域请求，而不是同源请求。这是因为我们的html文件是通过http://协议打开的（双击html文件时，会使用系统默认的浏览器打开，这时观察浏览器中的地址，可知是http协议。），而html中引用的js文件是通过file://协议引入的，协议不同，所以浏览器认为这是一个跨域请求。

解决办法

WebStorm - WebStorm打开网页时没有这个问题，因为WebStorm内置了一个服务器，所以它的协议是http://，所以不会报错。
VSCode - 安装插件Live Server，使用Live Server打开网页，也不会报错。
1. npm install -g live-server
2. Open terminal, cd 到html文件所在目录
3. run live-server .

当然也可以使用http-server

Philip

cors-import-js-from-html-locally

跨域问题一则

问题提出

解决办法