javascript - 跨源读取阻塞 (CORB)

Question

我已经使用 Jquery AJAX 调用了第三方 API。我在控制台中收到以下错误:

Cross-Origin Read Blocking (CORB) blocked cross-origin response MY URL with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我使用以下代码进行 Ajax 调用:

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

当我在 Fiddler 中 checkin 时，我得到了响应中的数据，但在 Ajax 成功方法中没有。

请帮帮我。

Answer 1

 dataType:'jsonp',

您正在发出 JSONP 请求，但服务器正在使用 JSON 进行响应。

浏览器拒绝尝试将 JSON 视为 JSONP，因为这会带来安全风险。 (如果浏览器确实尝试将 JSON 视为 JSONP，那么它充其量只会失败)。

参见 this question有关 JSONP 是什么的更多详细信息。请注意，绕过 CORS 可用之前使用的同源策略是一种令人讨厌的黑客攻击。 CORS 是一种更清洁、更安全、更强大的问题解决方案。

---

看起来您正在尝试发出跨域请求，并且将您能想到的所有内容都投入到一大堆相互冲突的指令中。

您需要了解同源策略的工作原理。

参见 this question获取深入指南。

---

现在对您的代码做一些说明:

contentType: 'application/json',

• 当你使用 JSONP 时会被忽略
• 您正在发出 GET 请求。没有描述类型的请求体。
• 这将使跨源请求变得不简单，这意味着除了基本的 CORS 权限外，您还需要处理飞行前的问题。

删除它。

 dataType:'jsonp',

• 服务器没有用 JSONP 响应。

删除它。 (您可以让服务器改为使用 JSONP 进行响应，但 CORS 更好)。

responseType:'application/json',

这不是 jQuery.ajax 支持的选项。删除它。

xhrFields: { withCredentials: false },

这是默认值。除非您使用 ajaxSetup 将其设置为 true，否则请删除它。

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },

• 这些是响应 header 。它们属于响应，而不属于请求。
• 这将使跨源请求变得不简单，这意味着除了基本的 CORS 权限外，您还需要处理飞行前的问题。