【JavaScript】JS引用本地文件CORS跨域问题

场景

Three.js搭建3D场景时，模型贴图加载失败，报错：

THREE.TextureLoader() Origin null is not allowed by Access-Control-Allow-Origin

 
 

分析

很显然，此时在浏览器上方可以看到file:///——标准的File协议（本地文件传输协议）

File协议静态请求本地资源出现跨域，这个请求被禁止。即File协议无法实现跨域。
 
通俗的说（⭐️）：

• file协议只能在本地访问，且这个访问只是一个简单的请求——将目标作为一个未经服务器解析的静态文件打开
• http协议将本机作为一台http服务器，然后通过localhost（本地ip）进行访问——即在本地搭建了一个服务器然后通过这个服务器动态解析了目标文件

 
 

解决

❶ 安装nodejs（这里提供Mac的安装方法）

>>> brew install node	

❷ 检查nodejs版本（安装高版本的nodejs时，npm是附赠安装的哦>_<）

>>> node -v

>>> npm -v

❸ 安装Anywhere（Apache搭建服务器比较臃肿(Tomcat)，nodejs的anywhere可进行小场景的快速搭建）

>>> cd /需要开启服务的目录(该目录下有个index.html)
>>> npm install anywhere -g

❹ 开启服务（默认开启8000端口）

>>> cd /需要开启服务的目录(该目录下有个index.html)
>>> anywhere

 
 

你会发现此时浏览器显示的不是file协议，而是http协议——跨域问题解决，资源成功加载 >_< ！！！