feat: remove hardcoded tile base URL, use proxy config instead

This approach fixes the CORS errors with the tileset queries.
ForumViriumHelsinki · Aug 23, 2024 · dbdf770 · dbdf770
1 parent a7fccbe
commit dbdf770
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,5 @@
 FROM node:21-alpine
 
-ARG VITE_TILE_BASE_URL="https://dl2sa.blob.core.windows.net/public3d/katukuntotieto"
-
 WORKDIR /app
 
 COPY . .

diff --git a/src/components/CesiumViewer.vue b/src/components/CesiumViewer.vue
@@ -26,8 +26,7 @@ import { LayerItemProps } from "./LayerItem.vue";
 
 const store = useStateStore();
 const prod = import.meta.env.PROD;
-const TILE_BASE_URL = import.meta.env.VITE_TILE_BASE_URL;
-console.log(`Tile base url (prod=${prod}): ${TILE_BASE_URL}`);
+console.log(`Tile base url (prod=${prod})`);
 
 onMounted(async () => {
     // @ts-ignore
@@ -70,7 +69,7 @@ const addConditionLayers = (store: StoreType) => {
         if (!layer.enabled) {
             return;
         }
-        Cesium.Cesium3DTileset.fromUrl(`${TILE_BASE_URL}/${layer.id}/tileset.json`, {
+        Cesium.Cesium3DTileset.fromUrl(`/tiles/${layer.id}/tileset.json`, {
             debugWireframe: false,
             showOutline: true,
             enableShowOutline: true,
@@ -112,7 +111,7 @@ const addBuildings = (store: StoreType) => {
 };
 
 const addCenterlines = (store: StoreType, layer: LayerItemProps) => {
-    Cesium.Cesium3DTileset.fromUrl(`${TILE_BASE_URL}/centerline/tileset.json`, {}).then(lyr => {
+    Cesium.Cesium3DTileset.fromUrl(`/tiles/centerline/tileset.json`, {}).then(lyr => {
         if (store.layers["centerline"]) {
             return;
         }

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,8 +2,29 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import cesium from "vite-plugin-cesium";
 
-// https://vitejs.dev/config/
 export default defineConfig({
+		server: {
+			proxy: {
+				"/tiles": {
+					target: "https://dl2sa.blob.core.windows.net/public3d/katukuntotieto",
+					changeOrigin: true,
+					secure: false,
+					rewrite: (p) => p.replace(/^\/tiles/, ""),
+				},
+			},
+			cors: false,
+		},
+		preview: {
+			proxy: {
+				"/tiles": {
+					target: "https://dl2sa.blob.core.windows.net/public3d/katukuntotieto",
+					changeOrigin: true,
+					secure: false,
+					rewrite: (p) => p.replace(/^\/tiles/, ""),
+				},
+			},
+			cors: false,
+		},
     plugins: [
         vue({
             script: {