跨域读阻塞 (CORB)

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

<块引用>

跨域读取阻止 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应 MY URL.有关详细信息，请参阅 https://www.chromestatus.com/feature/5629709824032768.

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

$.ajax({类型:'GET'，网址:我的网址，内容类型:'应用程序/json'，数据类型:'jsonp'，响应类型:'应用程序/json'，xhr字段:{withCredentials:假},标题:{'访问控制允许凭据':真，'访问控制允许来源':'*'，'访问控制允许方法':'GET'，'访问控制允许标头':'应用程序/json'，},成功:函数(数据){控制台.log(数据)；},错误:函数(错误){console.log("失败....==================");}});

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

请帮帮我.

解决方案

 数据类型:'jsonp',

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

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

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

<小时>

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

您需要了解同源政策的工作原理.

请参阅此问题以获取深入指南.

<小时>

现在关于您的代码的几点说明:

<块引用>

contentType: 'application/json',

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

删除它.

<块引用>

 数据类型:'jsonp',

• 服务器未使用 JSONP 响应.

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

<块引用>

responseType:'application/json',

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

<块引用>

xhr 字段:{withCredentials: false },

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

<块引用>

 标头:{'访问控制允许凭据':真，'访问控制允许来源':'*'，'访问控制允许方法':'GET'，'访问控制允许标头':'应用程序/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.