Three.js跨域问题(没法显示)

Three.js跨域问题

经过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过程，须要创建本地服务器来解决，若是不这样直接使用浏览器打开加载三维模型的.html文件，会出现报错没法模型文件没法加载，浏览器控制报错跨域问题的状况。

我的WebGL/Three.js技术博客

浏览器控制台报错：

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

若是你有很好的先后端基础，确定对跨域问题很了解，若是不了解也不要紧，下面会详细说明如何解决。

解决方案

解决方案就是在本地自定义服务器，能够经过nodejs、python等任何一个你熟悉的语言来实现。

编辑器

若是不想麻烦在本地自定义服务器，也可使用会自动帮助你创建本地服务器的一些代码编辑器，好比常见的的atom、WebStorm等编辑器，固然有些编辑器不会自动创建本地服务器，若是你不想更换不熟悉的代码编辑器，那就须要后端语言自定义本地服务器。

Nodejs自定义服务器

若是你熟悉其它的后端语言直接使用你熟悉的后端语言自定义服务器就能够，若是不熟悉，能够选择Nodejs。

若是你没有先后端基础，刚开始学习Threejs能够不展开学习前端、后端知识，可以调试three.js代码就行。若是你想开发项目，先后端的知识仍是要补充一些，若是不是专门的后端工程师也不必从新学习一门后端语言，直接使用Nodejs就行，Nodejs和前端同样使用的是JavaScript语言。

使用Nodejs自定义服务器很简单，首先是你要先百度Nodejs安装的相关文章，先在你的电脑上安装配置好Nodejs，熟悉下NPM的使用，而后使用npm执行npm install http-server安装http-server模块，若是想建立建立一个自定义的服务器，打开命令行，在你要打开的html文件所在的目录下，执行http-server就能够完成服务器建立，具体不了解的能够百度相关内容。

浏览器访问http://localhost:8080或http://127.0.0.1:8080 地址打开相应的.html文件就能够显示三维模型效果。

前端脚手架

刚开始学习three.js的时候，为了方便，可能不会使用一些前端框架，若是你实际开发项目的时候，可能会会把Three.js和Vue.js、React或AngularJs任何一种前端框架结合使用，这时候若是你使用这些前端框架的脚手架，好比VueJs的vue-cli脚手架，为了调试它自己就会建立本地服务器，这时候能够直接加载三维模型文件，不过注意不要把模型文件和html文件放在两个不一样的服务器地址下面。

相关文章

所谓的跨域（Cross-Origin）：https://blog.csdn.net/u011037...