接口请求失败？来看看这两位——跨域问题（CORS）和跨域解析问题（CORB）我们在开发中经常会遇到的两个问题——跨域问题

我们开发中经常会遇到的两个接口请求问题，跨域问题和跨域解析问题。

CORS是浏览器的同源政策的安全保护机制，同源策略要求跨域名访问必须三端同源，即域名，端口和IP是相同的。解决跨域问题一般采用Nginx作反向代理服务器。

CORB是跨域读取堵塞，意即：浏览器在加载可以跨域资源时，在资源载入页面之前，对其进行识别和拦截的算法。http状态码为200，但是无法返回数据。CORB是为了防止有心人利用img iframe script偷取后台信息（jsonp）的一种手段。

代码示例

例如我们要调用腾讯位置服务接口，其提供的API需要浏览器自行调用接口，拿到接口的返回值，但此时如果我们用axios直接调用会在控制台报错：

显然，直接调用是行不通的。于是我便想到使用JSONP的形式解决跨域：

// npm安装jsonp后使用
let url = `https://apis.map.qq.com/ws/geocoder/v1/?  location=${lat},${lng}&key=${key}&callback=callback`;      
      jsonp(url, null, (err, data) => {
        if (err) {
          console.error(err.message);
        } else {
          console.log(data);
        }
      });

运行代码后控制台又报告出了CORB警告

此时在浏览器的Network标签中查看发现接口的返回为空，这是由于当一个response 被 CORB 保护时，它的 body 会被覆盖为空，同时 headers 也会被移除(当前 Chrome 仍然会保留 Access-Control-* 相关的 headers) 。