跨域讀阻塞 (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 成功方法中。

請幫幫我。

Answer 1

 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 權限外，您還需要處理預飛行。

Answer 2

在大多數情況下，被阻止的響應不應影響網頁的行為，並且可以安全地忽略 CORB 錯誤消息。 例如，當被阻止的響應的主體已經為空時，或者當響應將被傳遞到無法處理它的上下文（例如，HTML 文檔，如 404 錯誤頁面）時，可能會出現警告被傳送到標簽）。

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

問題尚不清楚，但假設這是在開發或測試客戶端上發生的事情，並且鑒於您已經在使用 Fiddler，您可以讓 Fiddler 響應允許響應：

• 在 Fiddler 中選擇問題請求
• 打開“ AutoResponder選項卡
• 單擊Add Rule並將規則編輯為：
  • Method:OPTIONS server url here , eg Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• 檢查Unmatched requests passthrough
• 檢查Enable Rules

幾點注意事項：

1. 顯然，這只是一種開發/測試解決方案，無法/不切實際地修改 API 服務
2. 檢查您與第三方 API 提供商簽訂的任何協議是否允許您執行此操作
3. 正如其他人所指出的，這是 CORS 工作原理的一部分，最終需要在 API 服務器上設置標頭。 如果您控制該服務器，則可以自己設置標頭。 在這種情況下，由於它是第三方服務，我只能假設他們有某種機制，您可以通過這些機制向他們提供原始站點的 URL，並且他們將相應地更新其服務以使用正確的標頭進行響應。

Answer 6

如果您在本地主機上工作，試試這個，這是唯一對我有用的擴展和方法（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

似乎在發送帶有 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 11

響應頭通常設置在服務器上。 在服務器端將'Access-Control-Allow-Headers'設置為'Content-Type'

Answer 12

Cross-Origin Read Blocking (CORB)，一種算法，通過該算法，Web 瀏覽器可以識別並阻止可疑的跨源資源加載到達網頁之前。它旨在防止瀏覽器提供某些跨源網絡響應到一個網頁。

首先確保這些資源使用正確的“ Content-Type ”，即對於 JSON MIME 類型 - “ text/json ”，“ application/json ”，HTML MIME 類型 - “ text/html ”。

第二：將模式設置為 cors ie, mode:cors

提取看起來像這樣

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

參考資料： 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 13

您不能直接從代碼的客戶端（前端）調用第三方API。 用於調用，您需要在Server中進行更改，但是您不能這樣做。 在瀏覽器中，您將獲得正常響應，但是從Js代碼中，您將不會獲得響應。 試試這個鏈接去這里

Answer 14

我有一個類似的問題。 我的情況是因為服務器響應的 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 15

如果您在野生動物園中進行操作不花時間，只需在“偏好設置”>“隱私”中啟用開發人員菜單，然后從開發菜單中取消選擇“禁用跨域限制”。 如果只需要本地文件，則只需啟用開發人員菜單，然后從開發菜單中選擇“禁用本地文件限制”。

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

那應該禁用相同的原始策略，並允許您訪問本地文件。

Answer 16

我的 Chrome 擴展程序也有同樣的問題。 當我嘗試將這部分添加到我的清單“content_scripts”選項時：

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

我從我的清單“許可”中刪除了另一部分：

"https://*/"

只有當我在我的 XHR 請求之一中刪除它時，CORB 才會消失。

最糟糕的是，我的代碼中幾乎沒有 XHR 請求，只有一個開始出現 CORB 錯誤（為什么我不知道其他 XHR 上沒有出現 CORB；為什么清單更改會導致這個錯誤，我不知道）。 這就是為什么我花了幾個小時一次又一次地檢查整個代碼並浪費了很多時間。

Answer 17

我遇到這個問題是因為服務器的jsonp響應格式不對。 錯誤的回答如下。

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

問題是， callback中的對象應該是正確的 json 對象，而不是 json 數組。 所以我修改了一些服務器代碼並改變了它的格式：

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

瀏覽器愉快地接受了修改后的響應。

Answer 18

如果您在 google chrome 中遇到問題，請嘗試安裝“Moesif CORS”擴展程序。 由於它是跨源請求，因此即使響應狀態代碼為 200，chrome 也不接受響應