HTML5 CORS implementation

    Hi

    I've upgraded to the latest version of krpano from the 1.0.8.15 version ... imagine my shock when nothing was loading in HTML5 because all the files i use (tiles and images) are on Amazon.
    Ok so after a few hours of cursing and trial and error my conclusion is HTML5 cors option only works with OFF

    As you might already know the buckets on amazon have the option to set up "CORS Configuration" as they call it ... it uses an xml that defines the response headers .... here are my settings:

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
    </CORSConfiguration>

    as you might expected it does not work. so how should the krpano security tag look like to only allow GET requests to my bucket?

    thanks,
    Rares

    some updates ....

    http://www.360tourist.net/view-tour/4676

    the xml for that url is here => http://www.360tourist.net/read-tour/4676
    this is the link build be me ... the pb is i get an error only on HTML5 on Desktop browsers and on the default browser on Android 4.1.2
    what works is IOS and Chrome for Android
    so the error i get is this

    Code
    Viewport target-densitydpi is not supported. 
Uncaught Error: SecurityError: DOM Exception 18
Sa.drawtileimage
d.drawcubestrip
a.checkloading
$a.handleloading
Ld
Ne

    Rares

    Hi,

    the problem in your example is that there is NO 'Access-Control-Allow-Origin: *' http header at your tiles!

    Check the headers either with the Chrome/Firefox browser developers tools, so use sites like this:
    http://web-sniffer.net/?url=http://36…/l2_r_02_02.jpg

    Here as comparions a tile from the Tokyo example: (hosted on Amazons Cloudfrount CDN servers)
    http://web-sniffer.net/?url=http://d8…/4/l6_r_4_1.jpg

    The 'Access-Control-Allow-Origin' header is very important for loading files from other servers in HTML5.

    Some browser still allow loading images without that header, but then they require not setting the CORS flag on image on the client-side - this can be done in krpano with the cros="off" setting. Normally (=according to the CORS specification) the 'autonomy' CORS setting should also allow loading images without Access-Control-Allow-Origin header, but many browsers seems to ignore that.

    So as conclusion - ALWAYS set the Access-Control-Allow-Origin on the server when loading images from other domain - then it should work without problems anywhere.

    About the server setup itself - this depends on the server software and provider itself - please see also here:
    http://enable-cors.org/server.html

    And when using CDN servers keep in mind that they typically would cache the headers too, so that the cached files need to invalidated when changing the headers!

    Best regards,
    Klaus

    Amazon CORS works only when in the request, the header "Origin" is present. Simple example in curl:

    curl -v -H "Origin: https://localhost" "http://assets.XXXX.com.s3.amazonaws.com/whatever.jpg"


    < HTTP/1.1 200 OK

    < Access-Control-Allow-Origin: *
    < Access-Control-Allow-Methods: GET
    < Access-Control-Expose-Headers: x-amz-server-side-encryption, x-amz-request-id, x-amz-id-2
    < Access-Control-Max-Age: 3000
    < Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
    < Last-Modified: Mon, 24 Nov 2014 11:06:13 GMT
    < ETag: "16b05db1fc883a053cc5b60274ddca73"
    < Accept-Ranges: bytes
    < Content-Type: application/octet-stream
    < Content-Length: 578256
    < Server: AmazonS3

    When this header is not present, Amazon bucket does not return the needed Access-Control-Allow-Origin. My question is then, how krpano has to be configured to send this header within the image fetch request? <security cors=""></security> is not helping...

    i wrote up a tutorial for configuring AWS S3 for krpano and other panoramas here, CORS config info included -

    http://www.panopress.org/forums/topic/h…eb-services-s3/

    just configure your bucket as shown in the tutorial and upload your panos, all permissions and cors etc will be set properly for all files automatically, no need to make any changes to krpanotools output files or set file permissions manually etc

    sam

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden