vue集成cesium后打成的dist包,双击index.html报错CORS,怎么解决?

vue集成cesium后打成的dist包,双击index.html报错CORS.
image.png

需求就是不能借助任何形式的http server,要求dist包拷贝到任何电脑,双击index.html就能运行显示cesium的东西。
有这个需求,是因为这个dist会放到unreal engine5里面去和ue5做交互。
但是问题是ue5只能加载双击能直接打开的index.html。
或者有没有懂UE5的大神,这种通过双击不能打开的index.html怎么部署到ue5里面?
可以联系我,我发源码demo给你,一个页面的demo,只要能打包后双击index.html运行看到这个页面就可以。
image.png

搜索过网页各种解决方案、问过deepseek。 也按照各种方案试过了,还是报错CORS。

image.png

image.png

image.png

以上方式都试过了,没有作用,依然报错CORS。

下面是简单的demo:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="./cesium/Widgets/widgets.css">
<script src="./cesium/Cesium.js"></script>

<style>
    #cesiumContainer {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>

</head>
<body>

<!-- 2. 创建地图容器 -->
<div id="cesiumContainer"></div>

<script>
    // 3. 初始化Cesium Viewer
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2OTcyODJlMS1jNzYyLTQ5MTAtOTgzMC1jNjA4MDRiMmU5MTQiLCJpZCI6MjgzNDQ5LCJpYXQiOjE3NDE3NTA1NDV9.urOnswcih04SarcvtGak7QGvK88h7Pf-mmimOGPqRas'; // 替换为你的Token
    
    const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,        // 关闭动画控件
        timeline: false,         // 关闭时间线
        fullscreenButton: false  // 关闭全屏按钮
    });

    // 4. 添加一个示例模型
    const entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
        model: {
            uri: 'https://cesium.com/downloads/cesiumjs/releases/1.110/Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            minimumPixelSize: 128
        }
    });
    viewer.zoomTo(entity);
</script>

</body>
</html>

阅读 253
2 个回答

回答:你把你的index.html 的内容贴一下呢,关于直接加载静态资源的报错情况,我看你这个js文件应该是存在的,以相对路径引入时是可以找得到的,然后再把网络请求的情况截图看看,目前确实是报错被跨域拦住了

首先 双击index.html 来打开项目就是错误的操作。

正常情况你需要启动一个 HTTP 服务来指向你的 Vue 项目打包后的 dist 目录,来访问 index.html 文件。

比如说在 dist 目录下,右键空白区域启动 CMD 或者 PowerShell(或者在资源浏览器中的地址栏键入CMD来打开 CMD),执行 npx http-server 这个命令,启动一个指向 dist 目录的 HTTP 服务。

图片.png

图片.png


如果你觉得太麻烦。那么在将错就错的情况下,可以调整 vite.config.ts 中的 base 参数或者 vue.config.js 中的 publicpath 参数为 ./ 来以相对目录的形式引入编译后的资源文件。
可能可以正常预览项目中的一部分功能

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题