跨域读取阻塞 (CORB) [英] Cross-Origin Read Blocking (CORB)

问题描述

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

<块引用>

跨源读取阻止 (CORB) 阻止了具有 MIME 类型应用程序/json 的跨源响应我的 URL.请参阅 https://www.chromestatus.com/feature/5629709824032768 了解更多详情.

我在 Ajax 调用中使用了以下代码:

$.ajax({类型:'获取'，网址:我的网址，内容类型:'应用程序/json'，数据类型:'jsonp'，responseType:'应用程序/json',xhr 字段:{withCredentials: 假},标题:{'Access-Control-Allow-Credentials':真，'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'GET','Access-Control-Allow-Headers':'application/json',},成功:功能(数据){控制台日志(数据)；},错误:函数(错误){console.log("失败......==================);}});

当我在 Fiddler 中签入时，我得到了响应中的数据，但在 Ajax 成功方法中却没有.

请帮帮我.

解决方案

 dataType:'jsonp',

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

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

请参阅这个问题，了解有关什么是 JSONP 的更多详细信息.请注意，在 CORS 可用之前使用的同源策略是一个令人讨厌的技巧.CORS 是解决问题的更清洁、更安全、更强大的解决方案.

<小时>

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

您需要了解同源政策的运作方式.

有关深入指南，请参阅此问题.

<小时>

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

<块引用>

contentType: 'application/json',

• 当您使用 JSONP 时，这会被忽略
• 您正在发出 GET 请求.没有描述类型的请求正文.
• 这将使跨域请求变得不简单，这意味着除了基本的 CORS 权限外，您还需要处理预检.

去掉那个.

<块引用>

 dataType:'jsonp',

• 服务器没有响应 JSONP.

去掉这个.(你可以让服务器用 JSONP 来响应，但 CORS 更好).

<块引用>

responseType:'application/json',

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

<块引用>

xhrFields:{withCredentials: false },

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

<块引用>

 标题:{'Access-Control-Allow-Credentials':真，'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'GET','Access-Control-Allow-Headers':'application/json',},

• 这些是响应头.它们属于响应，而不是请求.
• 这将使跨域请求变得不简单，这意味着除了基本的 CORS 权限外，您还需要处理预检.

I have called third party API using Jquery AJAX. I am getting following error in console:

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.

I have used following code for Ajax call :

$.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....=================");
  }
});

When I checked in Fiddler, I have got the data in response but not in Ajax success method.

Please help me out.

解决方案

 dataType:'jsonp',

You are making a JSONP request, but the server is responding with JSON.

The browser is refusing to try to treat the JSON as JSONP because it would be a security risk. (If the browser did try to treat the JSON as JSONP then it would, at best, fail).

See this question for more details on what JSONP is. Note that is a nasty hack to work around the Same Origin Policy that was used before CORS was available. CORS is a much cleaner, safer, and more powerful solution to the problem.

---

It looks like you are trying to make a cross-origin request and are throwing everything you can think of at it in one massive pile of conflicting instructions.

You need to understand how the Same Origin policy works.

See this question for an in-depth guide.

---

Now a few notes about your code:

contentType: 'application/json',

• This is ignored when you use JSONP
• You are making a GET request. There is no request body to describe the type of.
• This will make a cross-origin request non-simple, meaning that as well as basic CORS permissions, you also need to deal with a pre-flight.

Remove that.

 dataType:'jsonp',

• The server is not responding with JSONP.

Remove this. (You could make the server respond with JSONP instead, but CORS is better).

responseType:'application/json',

This is not an option supported by jQuery.ajax. Remove this.

xhrFields: { withCredentials: false },

This is the default. Unless you are setting it to true with ajaxSetup, remove this.

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

• These are response headers. They belong on the response, not the request.
• This will make a cross-origin request non-simple, meaning that as well as basic CORS permissions, you also need to deal with a pre-flight.

这篇关于跨域读取阻塞 (CORB)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！