window.URL 与 跨域

跨域

关于跨域问题，简单来说就是通过地址访问资源时，所用的协议不同导致无法访问目标。

网上已经有很多关于跨域的主流解决办法，我这里就说说很少会想到用到的办法。

问题

先看看一个具体的小问题：

我需要将用户上传的本地 FBX 模型文件，利用 THREE.JS 的 放在 Canvas 中展示，而浏览器会给出一个跨域的报错:

three.js:34066 
Access to XMLHttpRequest at 'file:///Users/UserName/Downloads/three.js-
dev/examples/models/fbx/SambaDancing.fbx'  from origin 'null' has been 
blocked by CORS policy:  Cross origin requests are only supported for 
protocol schemes: http, data, chrome, chrome-extension, https.

这个问题一种解决方法是：可以通过将协议统一为 HTTP 来解决，具体不讲。

有时候我们无法转换协议或者更改其它设置的时候，可以利用 window.URL.createObjectURL() 这个方法。

window.URL

console.log(window.URL);

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

我们可以监听 input[type="file"] 的 onchange 事件，将文件读出来，然后传入上述方法:

// ...
const file = file[0];
const url = URL.createObjectURL(file);
// ...

这个可以用在很多需要解决跨域的地方。