vite请求代理

src/views/MarsView.vue

@@ -80,13 +80,13 @@ let moricLayer = null
 const BASEMAPS = {
   mola: {
     name: 'MOLA 高程图',
-    url: 'http://digitalmars.com.cn/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=%2Fdata%2Fmola%2FMars_MGS_MOLA_ClrShade_merge_global_463m.ptiff',
+    url: '/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=%2Fdata%2Fmola%2FMars_MGS_MOLA_ClrShade_merge_global_463m.ptiff',
     credit: 'Mars MGS MOLA Color-Shaded Relief',
     maximumLevel: 10,
   },
   moric: {
     name: '天问全球镶嵌',
-    url: 'http://digitalmars.com.cn/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=%2Fdata%2Fmoric_global%2FHX1_GRAS_MoRIC_DOM_076m_Global_00N00E_A.ptiff',
+    url: '/tiles/MarsCylindrical/{z}/{x}/{y}.png?url=%2Fdata%2Fmoric_global%2FHX1_GRAS_MoRIC_DOM_076m_Global_00N00E_A.ptiff',
     credit: 'HX1 GRAS MoRIC DOM 076m Global',
     maximumLevel: 12,
   },
@@ -107,9 +107,6 @@ function switchBasemap(type) {
     }),
     maximumLevel: config.maximumLevel,
     credit: config.credit,
-    headers: {
-      'host': 'api.MarsTitiler.com',
-    },
   })
 
   // 移除当前图层，添加新图层
@@ -209,9 +206,6 @@ onMounted(() => {
     }),
     maximumLevel: BASEMAPS.mola.maximumLevel,
     credit: BASEMAPS.mola.credit,
-    headers: {
-      'host': 'api.MarsTitiler.com',
-    },
   })
   molaLayer = viewer.imageryLayers.addImageryProvider(molaProvider)
 
@@ -224,9 +218,6 @@ onMounted(() => {
     }),
     maximumLevel: BASEMAPS.moric.maximumLevel,
     credit: BASEMAPS.moric.credit,
-    headers: {
-      'host': 'api.MarsTitiler.com',
-    },
   })
   moricLayer = viewer.imageryLayers.addImageryProvider(moricProvider)
   moricLayer.show = false

vite.config.js

@@ -7,5 +7,19 @@ export default defineConfig({
   server: {
     host: '0.0.0.0', // 监听所有网络接口，允许内网访问
     port: 5173,      // 指定端口
+    proxy: {
+      // 代理瓦片请求到 FRP 公网地址，并添加正确的 Host 头
+      '/tiles': {
+        target: 'http://digitalmars.com.cn',
+        changeOrigin: true,
+        rewrite: (path) => path, // 保持路径不变
+        configure: (proxy, options) => {
+          proxy.on('proxyReq', (proxyReq, req, res) => {
+            // 设置正确的 Host 头，让 FRP 能够路由到正确的虚拟主机
+            proxyReq.setHeader('Host', 'api.MarsTitiler.com')
+          })
+        },
+      },
+    },
   },
 })