欢迎来到我的技术博客

跨域问题的本质是浏览器的 同源策略（Same-Origin Policy） 限制。即使文件都在本地，以下情况也会触发跨域：
1. 文件协议不同（核心原因）
当直接用浏览器打开本地 HTML（file:///C:/project/index.html）时，源（Origin）会被视为 null。
如果此 HTML 中的 JS 尝试通过 fetch 或 XMLHttpRequest 加载同目录的 JSON 文件（file:///C:/project/data.json），浏览器会判定为跨域请求（源 null → file:// 协议），导致失败。
2. 路径不一致
即使协议相同，如果 HTML 文件和 JSON 文件的目录路径不同（例如：file:///C:/project1/index.html 和 file:///C:/project2/data.json），也会触发跨域。
3. 安全限制
浏览器禁止从 file://协议发起网络请求（包括本地 JSON），因为本地文件可能包含敏感信息，同源策略会阻止 JS 随意读取它们。

报错现象与原因分析
典型报错场景，当开发者按文档示例构造接口地址（如`site=https://www.itlaoli.com`）时，会触发以下错误：
{"error":400,"message":"site init fail"}
错误根源
在我的个人博客中，我未曾想过官网给出的代码居然会出错误的，通过多次排查李洋博客终于在对比实验中发现问题所在：
错误写法：site=https://www.bjun.tech（含协议头）
正确写法：site=www.bjun.tech（仅域名）

原因：百度API的`site`参数严格校验域名格式，若包含`http://`或`https://`协议标识符，会导致服务器无法识别网站主体，从而触发初始化失败。
解决方案与验证步骤
在我的个人博客多次测试的过程中发现了问题，接下来就是修正接口地址：将接口地址中的`site`参数改为纯域名格式：

修改插件或者主题集成的源代码，将原来的：
http://data.zz.baidu.com/urls?site=https://www.itlaoli.com&token=xxx
修改成：
http://data.zz.baidu.com/urls?site=www.itlaoli.com&token=xxx

为什么我们需要WebP格式？
想象一下，你在浏览一个网页，突然发现图片加载缓慢，是不是很扫兴？特别是在移动设备上，这种体验更是让人难以忍受。这就是为什么我们需要WebP格式的原因。WebP，由Google开发的新一代图片格式，以其高压缩率和优质画质脱颖而出，能够显著减少图片大小，让网页加载速度飞起来！

说到边缘计算，就不得不提腾讯云EdgeOne。这款基于边缘计算的云服务产品，能够将计算任务智能分发到离用户最近的边缘节点，大幅降低延迟，提升用户体验。而它的边缘函数功能，更是我们的得力助手，支持自定义处理逻辑，轻松实现图片压缩、格式转换等操作。
图片需要转换成webp格式，就把对应的规则写入即可，点击确定。完成以上步骤后，是不是迫不及待想看看效果了呢？别急，按照以下步骤来验证你的成果吧，再确定生效之后我们在浏览器中访问图片，然后F12，切换到Network点击图片，查看【content-type】类型【 image/webp】

对比原图和WebP图片的大小，感受那份压缩带来的惊喜！在不同网络环境下测试页面加载速度，看看优化效果是不是超乎想象！
通过以上步骤，你已经成功利用腾讯云EdgeOne边缘函数实现了图片WebP转换。实验结果表明，采用WebP格式的图片确实能够显著减少图片大小，提高网页加载速度，从而优化用户体验。随着边缘计算技术的不断发展，腾讯云EdgeOne将在更多场景下发挥重要作用，助力企业提升网站性能，让互联网世界更加美好！