为何用file协议打开HTML无法调用API？测试结果差异解析

问题背景 #

以下是一段调用天地图地理编码API的前端代码，点击按钮后会请求API数据并展示在页面中：

<!DOCTYPE html>
<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
      <button id="getData">getData</button>
      <div id="response"></div>
      <script>
          $(document).ready(function () {
              $("#getData").click(function () {
                  const apiUrl = "https://api.tianditu.gov.cn/geocoder";
                  const queryParams = {
                      postStr: '{"lon": 116.37304, "lat": 39.92594, "ver": 1}',
                      type: "geocode",
                      tk: "042ea7c9021511c43493a17f09c1bdda"
                  };

                  $.ajax({
                      url: apiUrl,
                      data: queryParams,
                      method: "GET",
                      success: function (data) {
                          $("#response").text(JSON.stringify(data, null, 2));
                      },
                      error: function (error) {
                          $("#response").text("request failed：" + error.statusText);
                      }
                  });
              });
          });
      </script>
  </body>
</html>

三次测试的不同结果：

• 测试1：双击打开本地HTML文件（浏览器使用file://协议），点击按钮后请求失败。
• 测试2：通过VSCode的Live Server插件打开文件（浏览器使用http://协议），请求成功获取数据。
• 测试3：直接在浏览器地址栏输入API完整地址，请求成功返回结果。

疑问解答 #

1. 直接打开文件请求失败的原因 #

核心原因是浏览器的同源策略拦截了跨域AJAX请求：

• 当用file://协议加载本地HTML时，页面的源属于本地文件系统，没有标准的域名、协议、端口信息；而请求的API使用https://协议，两者的源完全不匹配，属于跨域请求。
• 浏览器的同源策略会默认阻止这类跨域的AJAX请求，避免不可信的本地页面向远程服务器发送请求。
• 用Live Server打开时，页面通过http://localhost:xxxx这类本地HTTP服务加载，此时页面的源是http://localhost，天地图API的CORS配置允许来自localhost的开发环境请求，所以能正常响应。
• 直接在地址栏输入API地址不属于AJAX请求，浏览器不会触发同源策略的限制规则，因此能正常返回数据。

2. 服务器添加这类限制的目的 #

服务器通过CORS（跨域资源共享）策略限制跨域请求，主要是为了安全和资源保护：

• 防范CSRF攻击：如果没有限制，恶意网站可以冒充用户身份向API发送请求，窃取敏感数据或执行未授权操作。
• 避免资源滥用：防止恶意网站批量调用API，消耗服务器带宽和计算资源，影响正常用户的服务体验。
• 控制访问权限：API提供者可以指定允许访问的域名范围，确保只有授权的应用能调用服务，维护API的稳定性和安全性。

内容的提问来源于stack exchange，提问作者HouJuan