krpano 跨域載入圖片

krpano是？

krpano 是目前最專業，最好用的全景製作神器，並且支持VR模式瀏覽。有興趣可以查看http://krpano.com 官網，有許多example可以瀏覽，更新的版本也都這裡發布。

舉個使用場景栗子，一個項目首頁和資源是分離的，存放在不同的伺服器，如tour.html 在http://a.com伺服器，使用的所有資源放在http://b.com伺服器上，如果想讓http://a.com下文件可以請求http://b.com伺服器資源呢，就需要配置跨域調用啦，俗稱CORS，有兩處需要設置。

krpano頁面設置

//設置個路徑變數<krpano version="1.19" title="Virtual Tour" tileserver="http://b.com/">//在需要載入外站資源的地方設置下路徑：<preview url="%$tileserver%panos/car_l.tiles/preview.jpg" />

前端頁面設置的比較簡單，接下來要設置伺服器端允許跨域請求。

伺服器端設置

可以先通過View HTTP Request and Response Header檢測伺服器是否支持CORS調用。

部分瀏覽器可以在沒http頭的情況下允許載入圖片，但在前端則不能設置cors，在krpano的話則是 cros=」off」 。通常 『autonomy』 CORS 設置也可以在沒http頭的情況下允許載入圖片，但很多瀏覽器會忽略。因此必須在伺服器端設置Access–Control-Allow-Origin。

如果你的伺服器是nginx的，那麼在server里這麼設置就好了。

## Wide-open CORS config for nginx#location / { if ($request_method = OPTIONS) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; # # Custom headers and headers various browsers *should* be OK with but arent # add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; # # Tell client that this pre-flight info is valid for 20 days # add_header Access-Control-Max-Age 1728000; add_header Content-Type text/plain; charset=utf-8; add_header Content-Length 0; return 204; } if ($request_method = POST) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; add_header Access-Control-Expose-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; } if ($request_method = GET) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; add_header Access-Control-Expose-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; }}

以上的配置的含義是允許任何域發起的請求都可以獲取當前伺服器的數據，當然這樣危險性較大，可以把其中的*換成具體域名

* add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Origin http://a.com;

別的伺服器和語言http頭設置參見：enable cross-origin resource sharing

謝謝！