跨域读阻塞 (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 的更多详细信息，请参阅 this question。请注意，在 CORS 可用之前使用的同源策略是一个令人讨厌的黑客攻击。 CORS 是一种更清洁、更安全、更强大的解决方案。

---

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

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

请参阅 this question 以获取深入指南。

---

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

contentType: 'application/json',

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

删除它。

 dataType:'jsonp',

• 服务器没有响应 JSONP。

删除这个。 （你可以让服务器用 JSONP 来响应，但是 CORS 更好）。

responseType:'application/json',

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

xhr 字段：{ 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 错误消息。例如，当被阻止的响应的主体已经为空时，或者当响应将被传递到无法处理它的上下文（例如，HTML 文档，如 404 错误页面）时，可能会出现警告被传递到标签）。

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

我必须清理浏览器的缓存，我正在阅读此链接，如果请求得到空响应，我们会收到此警告错误。我的请求得到了一些 CORS，所以这个请求的响应是空的，我所要做的就是清除浏览器的缓存，然后 CORS 就消失了。我收到了 CORS，因为 chrome 已将端口号保存在缓存中，服务器只会接受 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

问题并不清楚，但假设这是在开发或测试客户端上发生的事情，并且鉴于您已经在使用 Fiddler，您可以让 Fiddler 响应允许响应：

• 在 Fiddler 中选择问题请求
• 打开AutoResponder 标签
• 单击Add Rule 并将规则编辑为：
  • Method:OPTIONS 此处为服务器 url，例如Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• 检查Unmatched requests passthrough
• 检查Enable Rules

几个注意事项：

1. 显然，这只是一种开发/测试解决方案，无法/不切实际地修改 API 服务
2. 检查您与第三方 API 提供商签订的任何协议是否允许您执行此操作
3. 正如其他人所指出的，这是 CORS 工作原理的一部分，最终需要在 API 服务器上设置标头。如果您控制该服务器，则可以自己设置标头。在这种情况下，由于它是第三方服务，我只能假设他们有某种机制，您可以通过这些机制向他们提供原始站点的 URL，并且他们将相应地更新其服务以使用正确的标头进行响应。李>

Answer 6

如果你在 localhost 上工作，试试这个，这是唯一对我有用的扩展和方法（Angular，只有 javascript，没有 php）

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

Answer 7

在 Chrome 扩展程序中，您可以使用

chrome.webRequest.onHeadersReceived.addListener

重写服务器响应标头。您可以替换现有标题或添加其他标题。这是你想要的标题：

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

我遇到了 CORB 问题，这为我解决了问题。

Answer 8

您是否尝试将 ajax 请求中的 dataType 从 jsonp 更改为 json？在我的情况下解决了它。

Answer 9

在这种情况下有一个值得一提的边缘案例：Chrome（至少某些版本）使用为 CORB 设置的算法检查 CORS 预检。 IMO，这有点傻，因为预检似乎不会影响 CORB 威胁模型，而且 CORB 似乎被设计为与 CORS 正交。此外，无法访问 CORS 预检的主体，因此不会产生负面后果，只是一个恼人的警告。

无论如何，检查您的 CORS 预检响应（OPTIONS 方法响应）没有正文 (204)。内容类型为 application/octet-stream 且长度为零的空 200 在这里也很有效。

您可以通过计算 CORB 警告与带有消息正文的 OPTIONS 响应来确认您遇到的情况。

Answer 10

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

Answer 11

似乎是在发送带有 200 的空响应时出现此警告。

我.htaccess中的这个配置在Chrome上显示警告：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

但是将最后一行改为

RewriteRule .* / [R=204,L]

解决问题！

Answer 12

我也有类似的问题。我的情况是因为服务器响应的 contentType 是 application/json，而不是 text/javascript。

所以，我从我的服务器（spring mvc）解决它：

// http://127.0.0.1:8080/jsonp/test?callback=json_123456
    @GetMapping(value = "/test")
    public void testJsonp(HttpServletRequest httpServletRequest,
                          HttpServletResponse httpServletResponse,
                          @RequestParam(value = "callback", required = false) String callback) throws IOException {
        JSONObject json = new JSONObject();
        json.put("a", 1);
        json.put("b", "test");
        String dataString = json.toJSONString();

        if (StringUtils.isBlank(callback)) {
            httpServletResponse.setContentType("application/json; charset=UTF-8");
            httpServletResponse.getWriter().print(dataString);
        } else {
            // important: contentType must be text/javascript
            httpServletResponse.setContentType("text/javascript; charset=UTF-8");
            dataString = callback + "(" + dataString + ")";
            httpServletResponse.getWriter().print(dataString);
        }
    }

Answer 13

我的 Chrome 扩展程序也遇到了同样的问题。当我尝试将这部分添加到我的清单“content_scripts”选项时：

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

我从我的清单“权限”中删除了另一部分：

"https://*/"

只有当我在我的 XHR 请求中删除它时，CORB 才会消失。

最糟糕的是，我的代码中几乎没有 XHR 请求，只有一个开始出现 CORB 错误（为什么我不知道其他 XHR 上没有出现 CORB；为什么清单更改会导致这个错误，我不知道） .这就是为什么我花了几个小时一次又一次地检查整个代码并浪费了很多时间。

Answer 14

我遇到这个问题是因为服务器的jsonp响应格式不对。错误响应如下。

callback(["apple", "peach"])

问题是，callback 里面的对象应该是正确的 json 对象，而不是 json 数组。所以我修改了一些服务器代码并改变了它的格式：

callback({"fruit": ["apple", "peach"]})

浏览器愉快地接受了修改后的响应。

Answer 15

如果您在 google chrome 中遇到问题，请尝试安装“Moesif CORS”扩展程序。由于是跨域请求，所以即使响应状态码为 200，chrome 也不接受响应