CORB（Cross-Origin Read Blocking）是从Vanilla JS getJSONP到Google Apps Script的过程中的一种安全策略。

8 浏览
0 Comments

CORB（Cross-Origin Read Blocking）是从Vanilla JS getJSONP到Google Apps Script的过程中的一种安全策略。

我使用Jquery AJAX调用了第三方API，但在控制台中出现了以下错误：

跨域读取阻止（CORB）导致跨域响应我的URL被拦截，MIME类型为application/json。详细信息请参阅https://www.chromestatus.com/feature/5629709824032768。

我使用了以下代码进行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中检查时，我收到了响应数据，但没有在Ajax的success方法中获得。

请帮助我解决这个问题。

0

3 答案

0 Comments

CORB from Vanilla JS getJSONP to Google Apps Script的问题是由于浏览器缓存导致的，解决方法是清除浏览器缓存。

根据提供的链接，大多数情况下，被阻止的响应不会影响网页的行为，可以安全地忽略CORB错误消息。例如，当被阻止的响应体已经为空，或者响应将被发送到无法处理它的上下文（例如将404错误页面发送到<img>标签）时，会出现警告。

在这个问题中，作者遇到了CORS（跨域资源共享）错误，导致请求的响应为空。解决方法是清除浏览器缓存，这样CORS错误就消失了。作者之所以受到CORS错误的影响，是因为Chrome浏览器将端口号保存在缓存中，而服务器只接受localhost:3010，而作者却使用了localhost:3002，这是由于浏览器缓存导致的。

0
0 Comments

问题的原因是在服务器响应中设置了'Access-Control-Allow-Origin:*'的头部信息，但是由于响应中包含了'Content-Type: application/json'，导致出现了CORB错误。解决方法是将服务器响应中的'Content-Type'头部信息更改为其他值，或者在客户端代码中使用一种不会触发CORB错误的方法来获取响应数据。

以下是解决该问题的一种可能方法：

function getJSONP(url, callback) {
  var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
  window[callbackName] = function(data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback(data);
  };
  var script = document.createElement('script');
  script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
  document.body.appendChild(script);
}
getJSONP('http://example.com/api/data', function(data) {
  console.log(data);
});

以上代码是使用纯JavaScript实现的getJSONP函数，它通过创建一个动态的script标签来获取跨域的JSON数据。这种方法不会触发CORB错误，因为它不直接将JSON数据作为响应体返回，而是通过回调函数获取数据。

在上述代码中，首先生成一个随机的回调函数名称，然后将该名称作为url的查询参数，将其赋值给script标签的src属性。接着将script标签添加到文档的body中，这样浏览器就会发送一个GET请求获取JSON数据。当服务器返回数据时，它会调用带有数据参数的回调函数，并将数据作为参数传递给它。

通过使用这种方法，可以绕过CORB错误，并成功获取跨域的JSON数据。

0
0 Comments

从上面的内容可以得出以下结论：

问题的原因：

- 使用JSONP请求，但服务器响应的是JSON格式数据。

- 浏览器拒绝将JSON作为JSONP处理，因为这可能会造成安全风险。

- 代码中存在大量冲突的指令，可能是由于对跨域请求的不了解。

解决方法：

- 了解同源策略的工作原理。

- 移除不相关的代码，如`contentType: 'application/json'`、`dataType: 'jsonp'`、`responseType: 'application/json'`、`xhrFields: { withCredentials: false }`和`headers`部分的代码。

以下是整理后的文章：

你正在尝试进行JSONP请求，但服务器响应的是JSON格式数据。由于存在安全风险，浏览器拒绝将JSON作为JSONP处理。JSONP是在CORS（跨域资源共享）出现之前用于解决同源策略问题的一种hack方式。与JSONP相比，CORS是一种更干净、更安全、更强大的解决方案。

在代码中，你试图一次性使用多个冲突的指令来进行跨域请求。你需要了解同源策略的工作原理。以下是关于你的代码的一些说明：

`contentType: 'application/json'`：在使用JSONP时会被忽略。

`dataType: 'jsonp'`：服务器没有响应JSONP，因此可以将其移除。

`responseType: 'application/json'`：这不是jQuery.ajax支持的选项，需要移除。

`xhrFields: { withCredentials: false }`：这是默认的设置，除非你在ajaxSetup中将其设置为true，否则可以移除。

`headers`部分的代码：这些是响应头，应该放在响应中而不是请求中。此外，这将使跨域请求变得非简单，除了基本的CORS权限外，你还需要处理预检请求。

为了解决问题，你需要了解同源策略的工作原理，并移除不相关的代码。

0