跨源读取阻塞(CORB)

Question

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

跨源读取阻止(CORB)阻止了具有MIME类型application/json的跨源响应MY URL.有关详细信息,请参阅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成功方法.

请帮帮我.

Answer 1

 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，否则将其删除。

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

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

Answer 2

在大多数情况下,阻止的响应不应该影响网页的行为,并且可以安全地忽略CORB错误消息.例如,当被阻止的响应的主体已经为空,或者响应将被传递到无法处理它的上下文时(例如,诸如404错误页面的HTML文档),可能发生警告.被送到标签).

https://www.chromium.org/Home/chromium-security/corb-for-developers

我不得不清理浏览器的缓存,我正在阅读此链接,如果请求获得空响应,我们会收到此警告错误.我的请求得到了一些CORS,所以这个请求的响应都是空的,我所要做的只是清除浏览器的缓存,而CORS却离开了.我收到了CORS,因为chrome已经在缓存中保存了PORT编号,服务器只是接受localhost:3010而我正在做localhost:3002,因为缓存.

Answer 3

返回带有标头“ Access-Control-Allow-Origin：*”的响应。检查以下代码以获取Php服务器响应。

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

Answer 4

您必须在服务器端添加CORS：

如果您使用的是nodeJS，则：

首先，您需要 cors使用以下命令进行安装：

npm install cors --save

现在，将以下代码添加到您的应用开始文件中，例如（app.js or server.js）

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

Answer 5

响应头通常在服务器上设置。设置'Access-Control-Allow-Headers'为'Content-Type'在服务器端