我滴天呐我去 2024-03-10 00:27 采纳率: 60%
浏览 153
已结题

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问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月12日
  • 已采纳回答 12月4日
  • 创建了问题 3月10日