跨域

關(guān)于跨域問(wèn)題，簡(jiǎn)單來(lái)說(shuō)就是通過(guò)地址訪問(wèn)資源時(shí)，所用的協(xié)議不同導(dǎo)致無(wú)法訪問(wèn)目標(biāo)。

網(wǎng)上已經(jīng)有很多關(guān)于跨域的主流解決辦法，我這里就說(shuō)說(shuō)很少會(huì)想到用到的辦法。

問(wèn)題

先看看一個(gè)具體的小問(wèn)題：

我需要將用戶上傳的本地 FBX 模型文件，利用 THREE.JS 的 放在 Canvas 中展示，而瀏覽器會(huì)給出一個(gè)跨域的報(bào)錯(cuò):

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.

這個(gè)問(wèn)題一種解決方法是：可以通過(guò)將協(xié)議統(tǒng)一為 HTTP 來(lái)解決，具體不講。

有時(shí)候我們無(wú)法轉(zhuǎn)換協(xié)議或者更改其它設(shè)置的時(shí)候，可以利用 window.URL.createObjectURL() 這個(gè)方法。

window.URL

console.log(window.URL);

URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。

我們可以監(jiān)聽 input[type="file"] 的 onchange 事件，將文件讀出來(lái)，然后傳入上述方法:

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

這個(gè)可以用在很多需要解決跨域的地方。