photo-sphere-viewer 图片跨域问题 The panorama can't be loaded

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();
        }
    }