为何加载JSON触发Access-Control-Allow-Origin错误而JS文件不受影响？

场景说明 #

当前运行的bookmarklet代码如下：

(function(doc) {
    function doStuff() {
        /***************/
        /* } Load data */
        /***************/
        function successfullyLoadData(data){
            debugger;
        }
        function loadData(){
            debugger;
            var data;
            jQuery.ajax({
                dataType: "json",
                url: "https://example.com/wp-content/plugins/n-bookmarklet/static/data/data.json",
                data: data,
                success: successfullyLoadData
            });
        }
        loadData();
        /***************/
        /* } Load data */
        /***************/
    ....
    /**************************/
    /* Load JavaScript libs { */
    /**************************/
    if (typeof jQuery == 'undefined') {
      var script_jQuery = document.createElement('script');
      script_jQuery.src = 'https://example.com/wp-content/themes/nonverbis_reboot_academic/static/js/jquery-3.6.1.min-1.js';
      script_jQuery.onload = loadEasyTimer;
      doc.body.appendChild(script_jQuery);
    } else {
        loadEasyTimer();
    }
    function loadEasyTimer(){
        if (typeof easytimer == 'undefined') {
            var script_easytimer = document.createElement('script');
            script_easytimer.src = 'https://example.com/wp-content/plugins/n-ege-timer/static/js/easytimer.min-1.js';
            script_easytimer.onload = doStuff;
            doc.body.appendChild(script_easytimer);
        } else {
            doStuff();
        }
    }
    /**************************/
    /* } Load JavaScript libs */
    /**************************/
})(document)

运行状态：jQuery和Easytimer通过<script>标签加载成功，但通过jQuery.ajax请求data.json时失败，提示缺少Access-Control-Allow-Origin响应头。

原因解析 #

这是浏览器同源策略针对不同资源类型的限制规则差异导致的：

• JS文件通过<script>标签加载：这属于浏览器特意放开的跨域资源嵌入例外，目的是支持CDN分发脚本、第三方组件嵌入等常见场景，所以不需要目标服务器返回CORS相关响应头，就能正常加载并执行。
• AJAX请求JSON数据：这类请求属于XMLHttpRequest（或Fetch）类型的跨域数据请求，同源策略对这类请求的限制非常严格，必须目标服务器在响应中返回Access-Control-Allow-Origin等CORS头，明确允许当前页面的域名跨域访问，浏览器才会把响应内容交给页面代码，否则就会触发跨域错误。

简单来说：浏览器给脚本嵌入开了“特例绿灯”，但对主动发起的数据请求，必须服务器明确授权才能放行。

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