百度地图引用时，报错A parser-blocking, cross site (i.e. different eTLD+1) script

最新推荐文章于 2024-01-24 20:01:30 发布
原创 最新推荐文章于 2024-01-24 20:01:30 发布 · 4.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在使用百度地图API时遇到的一个加载错误，并详细解释了可能的原因及解决方法。通过将URL从api更改为getscript，成功解决了由document.write()引起的跨域问题。
问题：

百度地图引用时，报错api?v=2.0&ak=MqgPRehwsDncQGZrRLg6OojcU8oSOYR2:1 A parser-blocking, cross site (i.e. different eTLD+1) script, https://api.map.baidu.com/getscript?v=2.0&ak=MqgPRehwsDncQGZrRLg6OojcU8oSOYR2&services=&t=20210113094335, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

原因：

暂不明，大概是因为某个地方用了document.write()吧。

解决方法：

修改api引用url，api改成getscript就行

//修改前
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=####################"></script>
//修改后
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=##########################"></script>
嵌入式Linux开发，Ubuntu22下交叉编译内核报错： multiple definition of `yylloc‘； scripts/dtc/dtc-lexer.lex.o:(.bss+0x0
寞水
11-26 5732
寞水
Docker 问题集锦(21) - 解决 ERROR: yaml.parser.ParserError: while parsing a block mapping
liuzhen007的专栏
12-21 3725
❤️ 背景 新开发的微服务，之前在调试阶段都是直接是用 docker run 命令启动，现在可以上线部署了，想使用 docker-compose 管理起来，因此需要编写相应的 docker-compose.yml 配置文件。
百度地图引用时 报出A Parser-blocking, cross site (i.e. different eTLD+1) script
baidu_39188121的博客
07-10 7685
页面引入百度地图api时 chrome控制台报出问题 A Parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=2017051714...
Vue引入百度地图警告：A Parser-blocking, cross site (i.e. different eTLD+1) script....
呱呱的博客
03-27 5941
控制台警告 在vue中引入地图控制台输出： 警告出现原因 页面渲染以后调用了document.write() ，而这种方式chrome53以上版本是不允许的。 警告的用意 对于在2G，3G 或者是慢 wifi 环境下面，使用document.write()动态加载资源会让页面的展现慢10秒以上，浏览器可以呈现页面之前，必须通过解析HTML标记来构建DOM树。每当解析器遇到脚本时，它必须停止并执行...
A parser-blocking, cross site (i.e. different eTLD+1) script, https://c.cnzz.com/core.php
极客神殿
09-25 6325
很多站长会遇到一个问题，网站加入CNZZ的JS统计代码后，Chrome浏览器出现警告：阻止跨站解析器阻断脚本通过document.write调用（A parser-blocking, cross site script,XXXX.js is invoked via document.write.）。该警告有时候可能会使HTTPS页面出现不安全因素，甚至让使用EV SSL证书的网站出现不显示绿色地址...
react项目引入百度地图api报有警告：A parser-blocking, cross site (i.e. different eTLD+1) script
weixin_45884050的博客
06-09 2532
A parser-blocking, cross site (i.e. different eTLD+1) script
react百度地图引用时，报错A parser-blocking, cross site (i.e. different eTLD+1) script
weixin_60974764的博客
11-16 634
暂不明，根据报错信息，可能是因为有地方用了document.write。根据报错信息，尝试修改api引用url地址。
yum-metadata-parser-1.1.2-16.el6.x86_64.rpm
05-30
yum-metadata-parser-1.1.2-16.el6.x86_64.rpm
yum-metadata-parser-1.1.2-3.el5.centos.i386.rpm
08-11
yum-metadata-parser-1.1.2-3.el5.centos.i386.rpm，CentOS下YUM安装包
百度地图引用时 报出A Parser-blocking, cross site (i.e. different eTLD+1) script
热门推荐
b809220024的博客
05-19 3万+
页面引入百度地图api时chrome控制台报出问题 A Parser-blocking, cross site (i.e. different eTLD+1) script,
react项目引入百度地图api出现警告：A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.ba
Aan___的博客
01-24 2470
通过document.write调用一个解析器阻塞，跨站点(即不同的eTLD+1)脚本，http://api.map.baidu.com/getscript?对于使用慢速连接(如2G)的用户，通过document.write()加载的第三方脚本的性能损失通常非常严重，以至于导致主页内容的显示延迟数十秒。在2G连接上的用户HTTP缓存丢失的情况下，该特性将阻止通过document.write()插入的跨域解析器阻塞脚本的加载。首先引入脚本，在index.html中引入以下script，密钥可去。
百度地图引用报错A parser-blocking, cross site (i.e. different eTLD+1) script
Cassie's blog
06-15 3万+
最近公司在搞vue项目，自己独立学习从头开始呀，都是泪。踩了好多坑，正好今天做到一个地方引入百度地图，之前做angular也做过，但是没有遇到这类问题。百度地图引入首先要申请ak哈。这个网上很多东西。自己遇到的是一个警告，看到控制台有东西就不爽，强迫症，看图：反正后面一大串，这个在控制台很难看，虽然不影响效果。解决办法：直接将我们引入的api地址：&lt;script src="http://ap...
A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2
hexd的博客
11-14 7579
spa中引入百度地图api出现警告 引入百度地图之后，页面出现黄色警告： A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&amp;ak=your ak&amp;services=&amp;t=**************, is invoke...
A parser-blocking, cross site (i.e. different eTLD+1) script,
肖肖肖丽珠的博客
08-25 5612
A parser-blocking, cross site (i.e. different eTLD+1) script, https://orgstatic1.vvwx.net/Web/Static/School/SchoolConfigData.js?v=1629852869575, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a f
A Parser-blocking, cross-origin script is invoked via document.write. This may be blocked by the bro
qq_36291682的博客
03-09 3万+
使用Chrome访问第三方的js库时，在控制台出现警告： A Parser-blocking, cross-origin script, https://example.com/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network
百度地图引用报错A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getsc
Hferje的博客
04-23 3185
直接将我们引入的api地址： <script src="http://api.map.baidu.com/api?v=2.0&ak=vb6eHsRZPQ8jTbKuwYg1TEA2dF7SepaA"></script> 其实我们把api改成getscript就可以了的 <script type="text/javascript" src="http:...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
weixin_32006655的博客
06-19 1660
3.jpgvue的百度地图早就有vue-baidu-map这里就不赘述了，自己去直接对着API写就好了，基本上已经满足绝大多数需求了还简单方便。vue-baidu-map 传送门 https://dafrok.github.io/vue-baidu-map/#/zh/index这里主要是在vue里面引入BMapGL，或者其他个性化地图。另外还有一篇文章是更加去全面的关于 BMapGL + BMap...
api?type=webgl&v=1.0&ak=rn7rkmAA2rU0sbkM1gvtP1vyFuvqQmd1:1 A parser-blocking, cross site (i.e. different eTLD+1) script, https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=rn7rkmAA2rU0sbkM1gvtP1vyFuvqQmd1&services=&t=20250723115759, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
最新发布
08-06
在引入百度地图 API 时，若使用 `document.write` 动态加载脚本，浏览器可能会出现警告：“A parser-blocking, cross site (i.e. different eTLD+1) script...”，该警告表明当前加载的脚本可能会阻塞 HTML 解析器，并且由于跨域原因，未来版本的浏览器可能会阻止该请求。这通常发生在 React 或 Vue 等现代前端框架中，因为这些框架倾向于在 DOM 加载后动态插入脚本。 ### 原因分析 该警告的核心问题在于： - **跨域脚本加载**：脚本来自与当前页面不同的域（如 `api.map.baidu.com`）。 - **使用 `document.write`**：在页面加载完成后调用 `document.write` 会重新打开文档流并阻塞页面解析，影响性能与安全性。 ### 解决方案 #### 1. 使用 `async` 或 `defer` 属性 在 `<script>` 标签中添加 `async` 或 `defer` 属性，可以让浏览器异步加载脚本，避免阻塞 HTML 解析器： ```html <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥" async ></script> ``` - `async`：脚本一旦下载完成就立即执行，适用于独立脚本。 - `defer`：脚本会在整个页面解析完成后按顺序执行，适用于依赖页面 DOM 的脚本。 #### 2. 动态创建 `<script>` 标签 在 React 或 Vue 中，可以通过 JavaScript 动态创建 `<script>` 标签并插入到 DOM 中，这样可以避免使用 `document.write`： ```javascript useEffect(() => { const script = document.createElement(&#39;script&#39;); script.src = &#39;https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥&#39;; script.async = true; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); ``` 这种方式不会触发 `document.write` 的警告，并且脚本加载不会阻塞页面渲染。 #### 3. 避免使用 `document.write` 如果第三方库或 API 加载方式依赖 `document.write`，应优先查找其官方文档中推荐的现代加载方式。例如百度地图 API 提供了通过 `<script>` 标签直接引入的方式，应优先使用静态引入而非动态生成。 #### 4. 使用模块化加载器（如 Webpack） 如果项目使用 Webpack 等打包工具，可以尝试使用模块化方式引入地图 API，而不是直接通过 `<script>` 标签加载。例如： ```bash npm install baidu-map ``` 然后在组件中按需引入： ```javascript import BMap from &#39;baidu-map&#39;; ``` 这种方式更符合现代前端开发规范，也避免了跨域脚本加载的问题。 #### 5. 使用服务端代理加载脚本（适用于生产环境） 在跨域问题严重且无法修改第三方脚本加载方式时，可以通过服务端代理加载脚本资源。例如在 `vue.config.js` 中配置代理： ```javascript devServer: { proxy: { &#39;/baidu-map&#39;: { target: &#39;https://api.map.baidu.com&#39;, changeOrigin: true, pathRewrite: { &#39;^/baidu-map&#39;: &#39;&#39; } } } } ``` 前端请求 `/baidu-map/api` 时，将由本地服务器代理请求百度地图 API，从而绕过跨域限制。 --- ###
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值