javascript - 跨域读阻塞 (CORB)

Question

我已经使用 Jquery AJAX 调用了第三方 API。我在控制台中收到以下错误：

跨域读取阻止 (CORB) 阻止了 MIME 类型为 application/json的跨域响应我的 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 成功方法中。

请帮帮我。

score 47 · Accepted Answer

 dataType:'jsonp',

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

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

有关 JSONP 是什么的更多详细信息，请参阅此问题。请注意，要解决在 CORS 可用之前使用的同源策略的问题，这是一个令人讨厌的 hack。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 权限外，您还需要处理预飞行。

score 20 · Accepted Answer

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

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

我必须清理浏览器的缓存，我正在阅读此链接，如果请求得到空响应，我们会收到此警告错误。我的请求得到了一些 CORS，所以这个请求的响应是空的，我所要做的就是清除浏览器的缓存，然后 CORS 就消失了。我收到了 CORS，因为 chrome 已将 PORT 号保存在缓存中，由于缓存，服务器只会接受localhost:3010并且我正在做localhost:3002。

score 14 · Accepted Answer

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

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

score 7 · Accepted Answer

您必须在服务器端添加 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);

score 3 · Accepted Answer

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

在 Fiddler 中选择问题请求
打开AutoResponder选项卡
单击Add Rule并编辑规则以：
- Method:OPTIONS server url here，例如Method:OPTIONS http://localhost
- *CORSPreflightAllow
查看Unmatched requests passthrough
查看Enable Rules

几点注意事项：

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

chrome.webRequest.onHeadersReceived.addListener

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

Access-Control-Allow-Origin: *

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

我被困在CORB问题上，这为我解决了这个问题。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

您可以通过使用消息正文计算 CORB 警告与 OPTIONS 响应来确认您是否遇到这种情况。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

似乎在发送带有 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]

解决问题！

score 0 · Accepted Answer

我有一个类似的问题。我的情况是因为服务器响应的 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);
        }
    }

score -2 · Accepted Answer

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

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

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

"https://*/"

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

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

score -3 · Accepted Answer

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

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

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

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

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

score -4 · Accepted Answer

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

javascript - 跨域读阻塞 (CORB)

15 回答 15

Related

Reference