调用AJAX接口出现Cross-Origin Read Blocking (CORB)跨域拦截报错如何解决？

问题根源 #

1. 浏览器同源策略限制：直接在地址栏访问URL属于导航类请求，不受同源策略约束，所以可以正常拿到返回结果。AJAX属于脚本发起的请求，跨域场景下必须满足CORS规则或者使用JSONP协议才能正常请求。
2. JSONP参数误用：你在AJAX配置中指定了dataType: "jsonp"，但该接口实际返回的是纯JSON格式，而非JSONP要求的「回调函数名包裹JSON内容」的格式。浏览器会将JSONP请求的返回内容当做脚本解析，纯JSON内容不符合脚本语法规则，就会触发CORB拦截。同时你配置的contentType: "jsonp;"属于无效参数，GET请求没有请求体，该参数会额外发送错误的请求头，加剧异常。
3. 接口未配置CORS规则：该API服务端没有返回合法的CORS响应头，因此你也无法直接用普通JSON格式的AJAX请求该接口。

解决方法 #

方案1：可调整API服务端配置（优先选择） #

• 给接口配置CORS响应头，添加Access-Control-Allow-Origin字段，值设置为你前端页面的域名（测试阶段可临时设为*，生产环境不建议），同步按需配置Access-Control-Allow-Methods、Access-Control-Allow-Headers等相关CORS字段。
• 调整前端AJAX配置，删除无效的crossOrigin: true、contentType: "jsonp;"参数，将dataType改为json即可，修改后代码示例如下：

jQuery.ajax({
    type: 'GET',
    url: "https://apitest.mobzgo.co.za/getSession?username=********&passingword=*****",
    dataType: "json",
    success: function (response) {
      alert(JSON.stringify(response));
    },
    error: function (jqXHR, exception, errorThrown) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status === 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status === 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = errorThrown;
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        alert(msg);
    } 
});

如果要继续使用JSONP，需要服务端调整接口逻辑，读取请求的callback参数，将返回的JSON数据用该参数值包裹后再返回，比如原返回{"sessionId":"xxx"}，调整后返回callback123({"sessionId":"xxx"})。

方案2：无法调整API服务端配置 #

• 增加后端代理层：在你自己的服务端新增一个同域接口，前端请求该同域接口，由服务端转发请求到目标API，拿到结果后再返回给前端，完全规避跨域限制。
• 本地开发临时调试可以用开发工具的代理能力，比如Webpack的devServer.proxy、Vite的server.proxy配置，将API请求路径代理到目标域名，绕过浏览器跨域限制。

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