我滴天呐我去 2024-03-10 00:27 采纳率: 30%
浏览 57

qt使用QWebEngineView加载百度地图失败

使用qt加载百度地图,在网上找了一个html文件,使用QWebEngineView进行加载,结果只能显示出一半,具体地图样式显示不出来。然后报错这个"Access to XMLHttpRequest at 'https://miao.baidu.com/abdr?_o=file%3A%2F%2F%27 from origin 'file://' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.", source: file:///E:/build-QtWebMap-Desktop_Qt_5_14_2_MSVC2017_32bit-Debug/debug/Demo.html (0),
请问有没有懂行的人能告诉一下这个是为什么嘛?是我html文件写错了还是我那个百度地图的密钥ak搞错了。

img

最终只能显示到这个程度,上面这个报错一出来直接没了

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-03-10 00:27
    关注

    引自免费微信小程序:皆我百晓生

    在Qt中使用QWebEngineView加载百度地图时遇到的CORS策略错误,通常是因为浏览器的安全策略阻止了从本地文件系统(file://)发起的请求获取远程服务器资源。百度地图API服务端要求必须设置正确的Access-Control-Allow-Origin头部来允许特定来源的请求访问其数据。

    针对您所描述的问题,有以下解决方案:

    1. HTML文件修改: 确保您的HTML文件正确引用了百度地图JavaScript API,并设置了有效的ak(密钥)。通常引用方式如下:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html, body, #container {width: 100%;height: 100%;margin:0;font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script>
        <title>百度地图显示</title>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript">
            var map = new BMap.Map("container");
            var point = new BMap.Point(114.05,22.54); // 深圳市中心经纬度
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();
        </script>
    </body>
    </html>
    

    请确保将 YOUR_API_KEY 替换为实际申请到的百度地图API密钥。

    1. 开发模式与部署: 在开发过程中,直接通过QWebEngineView加载本地HTML并尝试访问网络资源确实会受到CORS限制。为了调试和测试,请将项目部署到本地web服务器(如Python的SimpleHTTPServer或Node.js的http-server模块),然后用localhost地址加载页面,例如:http://localhost:8080/yourfile.html

    2. CORS头配置: 如果您拥有对远程服务器的控制权,可以在服务器端设置响应头Access-Control-Allow-Origin以允许来自特定源(包括本地)的请求。然而,对于百度地图这样的第三方服务,我们无法更改其服务器配置。

    综上所述,最直接且可行的方案是将HTML文件部署到本地web服务器进行调试和测试。当应用最终打包发布时,也可以考虑将HTML和相关资源嵌入到Qt资源系统中,并通过QWebEngineView加载内嵌资源的方式避免CORS问题。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 3月10日

悬赏问题

  • ¥15 mmo能不能做客户端怪物
  • ¥15 osm下载到arcgis出错
  • ¥15 Dell g15 每次打开eiq portal后3分钟内自动退出
  • ¥200 使用python编写程序,采用socket方式获取网页实时刷新的数据,能定时print()出来就行。
  • ¥15 matlab如何根据图片中的公式绘制e和v的曲线图
  • ¥15 我想用Python(Django)+Vue搭建一个用户登录界面,但是在运行npm run serve时报错了如何解决?
  • ¥15 QQ邮箱过期怎么恢复?
  • ¥15 登录他人的vue项目显示服务器错误
  • ¥15 (标签-android|关键词-app)
  • ¥15 comsol仿真压阻传感器