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

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

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

我必须清理浏览器的缓存，我正在阅读此链接，如果请求得到空响应，则会收到此警告错误。我在请求中收到了一些CORS，因此该请求的响应为空，我所要做的就是清除浏览器的缓存，CORS消失了。我收到CORS的原因是Chrome浏览器将PORT号保存在了缓存中。由于缓存的原因，服务器只接受localhost:3010，而我正在localhost:3002进行

Answer 2

 dataType:'jsonp',

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

浏览器拒绝尝试将JSON视为JSONP，因为这将带来安全风险。（如果浏览器 did 尝试将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支持的选项。删除它。

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 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

您是否尝试过将ajax请求中的dataType从jsonp更改为json？就我而言，解决了这个问题。

Answer 6

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

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

一些注意事项：

很明显，这只是开发/测试的解决方案，在不可能/不可行的情况下修改API服务
检查与第三方API提供者的任何协议是否允许您这样做
正如其他人指出的那样，这是CORS工作方式的一部分，最终，需要在API服务器上设置标头。如果您控制该服务器，则可以自己设置标题。在这种情况下，由于它是第三方服务，因此我只能假定它们具有某种机制，可以通过该机制向其提供原始站点的URL，并且它们将相应地更新其服务以响应正确的标头。

Answer 7

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

chrome.webRequest.onHeadersReceived.addListener

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

Access-Control-Allow-Origin: *

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

我在CORB问题上陷入困境，这为我解决了这个问题。

Answer 8

当发送带有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 9

如果您在本地主机上工作，请尝试此操作，这是对我有用的唯一扩展名和方法（Angular，仅javascript，无php）

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

Answer 10

我也有类似的问题。我的情况是因为服务器响应的 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 11

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

Answer 12

我的Chrome扩展程序存在相同的问题。当我尝试将清单添加到清单的“ content_scripts”选项时，此部分：

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

然后从清单“ permissons”中删除另一部分：

"https://*/"

仅当我在一项XHR请求不满意时删除CORB时。

最糟糕的是，我的代码中很少有XHR请求，只有其中一个开始出现CORB错误（为什么我不知道为什么CORB不适用于其他XHR；为什么清单更改导致了我不知道的错误）。这就是为什么我一次又一次地检查整个代码并浪费大量时间的原因。

Answer 13

在这种情况下，有一个值得一提的极端情况：Chrome（至少是某些版本）使用为CORB设置的算法检查CORS飞行前检查。 IMO，这有点愚蠢，因为飞行前似乎不会影响CORB威胁模型，而且CORB似乎设计为与CORS正交。而且，CORS起飞前的身体无法接近，因此不会有刺激性的警告。

无论如何，检查您的CORS飞行前响应（OPTIONS方法响应）没有身体（204）。内容类型为application / octet-stream且长度为零的空200在这里也适用。

通过计算带有消息正文的CORB警告与OPTIONS响应，可以确认是否遇到这种情况。

Answer 14

跨源读取阻止（CORB），一种算法，通过该算法，网络浏览器可以在到达网页之前识别并阻止可疑的跨域资源负载。此功能旨在防止浏览器传递某些跨站点资源。原始网络对网页的响应。

首先，请确保为这些资源提供正确的“ Content-Type”，即，对于JSON MIME类型-“ text/json”，“ application/json”，HTML MIME类型-“ { {1}}”。

第二个：将模式设置为cors，即text/html

获取内容看起来像这样

mode:cors

引用：https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

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

Answer 15

我正在运行apache服务器，并将以下Header's添加到我的VirtualHost的{{1}}

Directory

Answer 16

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

Answer 17

我遇到了此问题，因为来自服务器的jsonp响应的格式错误。错误响应如下。

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

问题是callback中的对象应该是正确的json对象，而不是json数组。因此，我修改了一些服务器代码并更改了其格式：

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

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

Answer 18

如果您在野生动物园中进行操作不花时间，只需从“偏好设置” >>“隐私”中启用开发人员菜单，然后从开发菜单中取消选择“禁用跨域限制”。如果只需要本地文件，则只需启用开发人员菜单，然后从开发菜单中选择“禁用本地文件限制”。

并在Chrome for OSX中打开“终端”并运行：

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

-OSX上的Chrome 49+上需要user-data-dir

对于Linux运行：

$ google-chrome --disable-web-security

此外，如果您出于开发目的（例如AJAX或JSON）尝试访问本地文件，也可以使用此标志。

-–allow-file-access-from-files

对于Windows，请进入命令提示符并进入Chrome.exe所在的文件夹，然后键入

chrome.exe --disable-web-security

这应该禁用相同的原始策略，并允许您访问本地文件。

跨源读取阻塞（CORB）

18 个答案: