从 Azure 访问图像时出现跨源错误

Question

我有一个使用 Photosphereviewer js 显示图像的应用程序。

我使用了 node.js 应用程序并将其上传到 Azure 网站（例如：http://example1.com）。 Photosphereviewer 中使用的图像来自另一个站点（例如：https://example2.com）。

现在，当我从http://example1.com 访问图像时，它会抛出如下错误

从原点访问“https://example2.com/images/1.JPG”处的图像 'http://example1.com' 已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://example1.com” 访问。

当我尝试使用内部另一个站点的图像时，它会正确显示图像而不会出错。

但是，当我在 Photosphereviewer 中使用如下图像时，它会引发 cors 错误：

var PSV = new PhotoSphereViewer({
                    panorama: 'https://example2.com/images/1.JPG',
                    container: 'photosphere',
                    caption: 'Images',
                    cors_anonymous: true,
                    checkImageOrigin: false,
                    // loading_img: 'http://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
                    navbar: 'autorotate zoom download caption', // fullscreen
                    // default_fov: 70,
                    mousewheel: false,
                    size: {
                      height: 520//472
                    }
                });

我在 node js 应用的 app.js 中使用了 cors，如下所示：

app.use(cors());
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*'); // We can access from anywhere
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');

  next();
});

在 Azure 网站中，我在 Api 部分下的 CORS 选项下包含了站点名称。

但没有一个有效。它会引发相同的错误。请帮助解决这个问题。提前致谢。

Answer 1

您的网站example2 似乎提供图像，具有快速静态集，例如：
app.use(express.static('public'));,
并且您的图像文件可能会列在目录public/images 下。

我在上述环境中重现了您的问题。

您可以尝试在 expressjs 服务器中构建一个单独的路由来为您的PhotoSphereViewer 客户端提供图像：

app.get('/getimages/:filename',(req,res)=>{
  res.sendFile(__dirname+'/public/images/'+req.params.filename)
})

在最前线：

var PSV = new PhotoSphereViewer({
                panorama: 'https://example2.azurewebsites.net/getimages/1.jpg',
                container: 'photosphere',
                caption: 'Images',
                cors_anonymous: true,
                checkImageOrigin: false,
                // loading_img: 'http://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
                navbar: 'autorotate zoom download caption', // fullscreen
                // default_fov: 70,
                mousewheel: false,
                size: {
                  height: 520//472
                }
            });