photo-sphere-viewer 圖片跨域問題 The panorama can't be loaded
使用photo-sphere-viewer 展示不是當前域的圖片 會出現跨域問題。。。
this.viewer = new Viewer({
container: document.querySelector('#viewer'),
panorama: 'https://manual.pchi-china.com/img/bgReg.44a8bdab.png',
。。。。
百度了有一個哥們,通過改造源碼的方式解決 但是已經是2018年的事情了 我找到源碼后已經找不到他改的那些代碼了，所以這條路行不通。
解決方法一：
在看three.js的源碼的時候 發現使用base64圖片的時候是沒有跨域問題的
imgurl1:'data:image/jpeg;base64,/9j/4AAQSkZJ..'
使用base64的時候雖然沒有跨域問題，當圖片數量多了（就幾張沒事），base64太大 無論是前端轉換 還是后台轉換再傳輸過來都是非常耗時的。
解決方法二：
既然不能跨域加載圖片，那就通過nginx 反向代理一下也是可以解決的。
如果使用OSS雲存儲 雲存儲也可以配置跨域，具體這邊我沒有操作權限 就沒有嘗試。
解決方法三：
方案二如果圖片oss存儲地址 增加或修改都需要更改nginx配置，也是挺麻煩。
現在項目是一個前台vue 一個后台java項目 nginx把api請求反向代理到后台。
那么我直接在后台提供一個 將遠程圖片地址轉換成圖片流返回，這樣的話都走一個請求， 就不會因為oss地址變化來修改nginx配置。
imgurl1:'http://localhost:8080/api/common/image?url=https://manual.pchi-china.com/img/bgReg.44a8bdab.png',
@ApiOperation(value = "獲取圖片")
@GetMapping("/image")
public void image(HttpServletResponse response, String url) {
OutputStream os = null;
BufferedInputStream bis = null;
HttpURLConnection httpUrl = null;
URL urlObj;
int BUFFER_SIZE = 1024;
byte[] buf = new byte[BUFFER_SIZE];
int size = 0;
try {
urlObj = new URL(url);
httpUrl = (HttpURLConnection) urlObj.openConnection();
httpUrl.connect();
bis = new BufferedInputStream(httpUrl.getInputStream());
os = response.getOutputStream();
while ((size = bis.read(buf)) != -1) {
os.write(buf, 0, size);
}
os.flush();
} catch (Exception e) {
e.printStackTrace();
} finally {
if (os != null) {
try {
os.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (bis != null) {
try {
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
httpUrl.disconnect();
}
}