跨域問題解決Access to image at 'file:///png' from origin 'null' has been blocked by CORS policy

在谷歌瀏覽器中出現

Access to image at 'file:///C:/Users/DK/Desktop/threejs%E5%AD%A6%E5%A0%82/material/g8.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

這是瀏覽器安全不允許跨域訪問，即使是訪問本地文件也不行，必須是以http，https網絡請求方式訪問。

網上解決辦法是：crossorigin="anonymous"

以及瀏覽器快捷方式加參數：chrome.exe --disable-web-security   （后患無窮）

 

正確的解決辦法是：建立本地服務器，現在介紹一分鍾建立本地服務器的辦法

方法一：Servez

簡介：https://greggman.github.io/servez/

 

該服務器支持mac，linux，windows。

window版直接下載exe文件即可，有界面，選擇要建站的文件夾，點Start 就可以了。相當簡單。

 

方法二：Node.js http-server

下載安裝http-server

 npm install --global http-server
C:\Users\mybj\AppData\Roaming\npm\hs -> C:\Users\mybj\AppData\Roaming\npm\node_modules\http-server\bin\http-server
C:\Users\mybj\AppData\Roaming\npm\http-server -> C:\Users\mybj\AppData\Roaming\npm\node_modules\http-server\bin\http-server
+ http-server@0.12.3
added 30 packages from 40 contributors in 6.6s

啟動http-server

命令

http-server [path] [options]

[path]的默認值：先找 ./public ，否則使用 ./ 。

例如：

復制$ http-server
Starting up http-server, serving ./
Available on:
  http://192.168.17.140:8081
  http://192.168.44.1:8081
  http://192.168.208.1:8081
  http://192.168.137.1:8081
  http://127.0.0.1:8081
Hit CTRL-C to stop the server

效果如下：