Wednesday 17 May 2017

Cross origin Error when accessing image from Azure

I have an application in which I have used Photosphereviewer js to display the image.

I have used node.js app and uploaded it to Azure web site (say: http://example1.com). The image used in Photosphereviewer is from another site (say: https://example2.com).

Now, When I am accessing the image from http://example1.com, It throws error as below

Access to Image at 'https://example2.com/images/1.JPG' from origin 'http://example1.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example1.com' is therefore not allowed access.

When I tried to use the image from another site inside it displays the image correctly without error.

But, when I used the image inside Photosphereviewer as below, it throws cors error:

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

I have used cors in my app.js of node js app as below:

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

In Azure web site I have included the site name under CORS option under Api section.

But none worked. It throws the same error. Please help to overcome this issue. Thanks in advance.



via user3211705

No comments:

Post a Comment