Chặn đọc chéo nguồn gốc (CORB)

Tôi đã gọi API của bên thứ ba bằng Jquery AJAX. Tôi nhận được lỗi sau trong giao diện điều khiển:

Chặn đọc chéo nguồn gốc (CORB) đã chặn phản hồi nguồn gốc chéo URL MY với ứng dụng loại MIME / json. Xem https://www.chromestatus.com/feature/5629709824032768 để biết thêm chi tiết.

Tôi đã sử dụng mã sau đây cho cuộc gọi 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....=================");
  }
});

Khi tôi kiểm tra trong Fiddler, tôi đã nhận được dữ liệu phản hồi nhưng không phải trong phương thức thành công của Ajax.

Hãy giúp tôi ra.

 dataType:'jsonp',

Bạn đang thực hiện một yêu cầu JSONP, nhưng máy chủ đang phản hồi với JSON.

Trình duyệt từ chối thử coi JSON là JSONP vì đây sẽ là một rủi ro bảo mật. (Nếu trình duyệt đã cố gắng coi JSON là JSONP thì tốt nhất là nó sẽ thất bại).

Xem câu hỏi này để biết thêm chi tiết về JSONP là gì. Lưu ý rằng đó là một hack khó chịu để làm việc xung quanh Chính sách xuất xứ tương tự đã được sử dụng trước khi CORS có sẵn. CORS là một giải pháp sạch hơn, an toàn hơn và mạnh mẽ hơn cho vấn đề này.

Có vẻ như bạn đang cố gắng thực hiện một yêu cầu có nguồn gốc chéo và đang ném mọi thứ bạn có thể nghĩ ra trong một đống lớn các hướng dẫn xung đột.

Bạn cần hiểu chính sách của Origin Origin hoạt động như thế nào.

Xem câu hỏi này cho một hướng dẫn chuyên sâu.

Bây giờ một vài lưu ý về mã của bạn:

contentType: 'application/json',

• Điều này bị bỏ qua khi bạn sử dụng JSONP
• Bạn đang thực hiện một yêu cầu NHẬN. Không có cơ thể yêu cầu để mô tả các loại.
• Điều này sẽ làm cho một yêu cầu xuất xứ chéo không đơn giản, có nghĩa là cũng như các quyền CORS cơ bản, bạn cũng cần phải xử lý một chuyến bay trước.

Loại bỏ điều đó.

 dataType:'jsonp',

• Máy chủ không phản hồi với JSONP.

Tháo cái này. (Bạn có thể làm cho máy chủ trả lời bằng JSONP thay vào đó, nhưng CORS thì tốt hơn).

responseType:'application/json',

Đây không phải là một tùy chọn được jQuery.ajax hỗ trợ. Tháo cái này.

xhrFields: {withCredentials: false},

Đây là mặc định. Trừ khi bạn đang đặt nó thành true với ajaxSetup, hãy xóa cái này.

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

• Đây là những tiêu đề phản hồi. Họ thuộc về phản ứng, không phải yêu cầu.
• Điều này sẽ làm cho một yêu cầu xuất xứ chéo không đơn giản, có nghĩa là cũng như các quyền CORS cơ bản, bạn cũng cần phải xử lý một chuyến bay trước.

Trong hầu hết các trường hợp, phản hồi bị chặn sẽ không ảnh hưởng đến hành vi của trang web và thông báo lỗi CORB có thể được bỏ qua một cách an toàn. Ví dụ: cảnh báo có thể xảy ra trong các trường hợp khi phần thân của phản hồi bị chặn đã trống hoặc khi phản hồi sẽ được gửi đến ngữ cảnh không thể xử lý nó (ví dụ: tài liệu HTML như trang lỗi 404 đang được gửi đến một thẻ).

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

Tôi đã phải xóa bộ nhớ cache của trình duyệt, tôi đã đọc trong liên kết này, rằng, nếu yêu cầu nhận được phản hồi trống, chúng tôi sẽ gặp lỗi cảnh báo này. Tôi đã nhận được một số CORS theo yêu cầu của mình và vì vậy phản hồi của yêu cầu này đã trống rỗng, Tất cả những gì tôi phải làm là xóa bộ nhớ cache của trình duyệt và CORS đã biến mất. Tôi đã nhận được CORS vì chrome đã lưu số PORT trên bộ đệm, Máy chủ sẽ chấp nhận localhost:3010và tôi đang làm localhost:3002, vì bộ đệm.

Trả lời phản hồi với tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ: *' Kiểm tra mã bên dưới để biết phản hồi của máy chủ Php.

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

Bạn phải thêm CORS ở phía máy chủ:

Nếu bạn đang sử dụng nodeJS thì:

Trước tiên, bạn cần cài đặt cors bằng cách sử dụng lệnh dưới đây:

npm install cors --save

Bây giờ hãy thêm đoạn mã sau vào tệp bắt đầu ứng dụng của bạn như ( 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);

Không rõ câu hỏi nào, nhưng giả sử đây là điều gì đó đang xảy ra trên máy khách đang phát triển hoặc thử nghiệm và được cho rằng bạn đang sử dụng Fiddler, bạn có thể yêu cầu Fiddler trả lời với phản hồi cho phép:

• Chọn yêu cầu vấn đề trong Fiddler
• Mở AutoRespondertab
• Nhấp Add Rulevà chỉnh sửa quy tắc để:
  • Phương pháp: url máy chủ TÙY CHỌN tại đây , vdMethod:OPTIONS http://localhost
  • *CORSPreflightAllow
• Kiểm tra Unmatched requests passthrough
• Kiểm tra Enable Rules

Một vài lưu ý:

1. Rõ ràng đây chỉ là một giải pháp để phát triển / thử nghiệm trong trường hợp không thể / thực tế để sửa đổi dịch vụ API
2. Kiểm tra xem mọi thỏa thuận bạn có với nhà cung cấp API bên thứ ba có cho phép bạn thực hiện việc này không
3. Như những người khác đã lưu ý, đây là một phần trong cách CORS hoạt động và cuối cùng, tiêu đề sẽ cần phải được đặt trên máy chủ API. Nếu bạn kiểm soát máy chủ đó, bạn có thể tự đặt tiêu đề. Trong trường hợp này vì đây là dịch vụ của bên thứ ba, tôi chỉ có thể giả sử họ có một số cơ chế thông qua đó bạn có thể cung cấp cho họ URL của trang web ban đầu và họ sẽ cập nhật dịch vụ của họ để đáp ứng với các tiêu đề chính xác.

Nếu bạn đang làm việc trên localhost, hãy thử cái này, đây là tiện ích mở rộng và phương thức duy nhất phù hợp với tôi (Angular, chỉ javascript, không có php)

https://chrom.google.com.vn/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=vi

Bạn đã thử thay đổi dataTypeyêu cầu ajax của bạn từ jsonpđến json? đã sửa nó trong trường hợp của tôi.

Trong tiện ích mở rộng của Chrome, bạn có thể sử dụng

chrome.webRequest.onHeadersReceived.addListener

để viết lại các tiêu đề phản hồi của máy chủ. Bạn có thể thay thế một tiêu đề hiện có hoặc thêm một tiêu đề bổ sung. Đây là tiêu đề bạn muốn:

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersĐược nhận

Tôi đã bị mắc kẹt trong các vấn đề CORB, và điều này đã khắc phục nó cho tôi.

Tiêu đề phản hồi thường được đặt trên máy chủ. Đặt 'Access-Control-Allow-Headers'thành 'Content-Type'phía máy chủ

Chặn đọc nguồn gốc chéo (CORB), một thuật toán mà tải tài nguyên có nguồn gốc chéo đáng ngờ có thể được xác định và chặn bởi các trình duyệt web trước khi chúng truy cập trang web..Nó được thiết kế để ngăn trình duyệt cung cấp một số phản hồi mạng có nguồn gốc chéo nhất định đến một trang web.

Trước tiên, hãy đảm bảo các tài nguyên này được cung cấp với một "" chính xác Content-Type, nghĩa là đối với loại MIME JSON - " text/json", " application/json", loại MIME HTML - " text/html".

Thứ hai: đặt chế độ thành cors tức là mode:cors

Fetch sẽ trông giống như thế này

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

tài liệu tham khảo: https://chromium.googlesource.com/chromium/src/+/master/service/network/cross_origin_read_blocking_explainer.md

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

Có một trường hợp cạnh đáng được đề cập trong ngữ cảnh này: Chrome (ít nhất là một số phiên bản) kiểm tra các kết quả CORS bằng thuật toán được thiết lập cho CORB . IMO, điều này hơi ngớ ngẩn vì các tiền tố dường như không ảnh hưởng đến mô hình mối đe dọa CORB và CORB dường như được thiết kế để trực giao với CORS. Ngoài ra, cơ thể của đèn pha CORS không thể truy cập được, do đó không có hậu quả tiêu cực chỉ là một cảnh báo khó chịu.

Dù sao, hãy kiểm tra xem các phản hồi trước CORS của bạn (phản hồi của phương thức TÙY CHỌN) không có cơ thể (204) . 200 trống với ứng dụng loại nội dung / octet-stream và độ dài bằng 0 cũng hoạt động tốt ở đây.

Bạn có thể xác nhận nếu đây là trường hợp bạn đang nhấn bằng cách đếm các cảnh báo CORB so với các phản hồi TÙY CHỌN với nội dung thư.

Có vẻ như cảnh báo này xảy ra khi gửi phản hồi trống với 200.

Cấu hình này trong .htaccessmàn hình của tôi cảnh báo trên 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]

Nhưng thay đổi dòng cuối cùng thành

RewriteRule .* / [R=204,L]

giải quyết vấn đề!

Tôi gặp vấn đề tương tự với tiện ích mở rộng Chrome của mình. Khi tôi cố gắng thêm vào tùy chọn "content_scripts" tệp kê khai của mình, phần này:

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

Và tôi loại bỏ phần khác khỏi "permissons" bảng kê khai của mình:

"https://*/"

Chỉ khi tôi xóa nó CORB trên một trong những yêu cầu XHR của tôi mới biến mất.

Điều tồi tệ nhất là có một vài yêu cầu XHR trong mã của tôi và chỉ một trong số họ bắt đầu gặp lỗi CORB (tại sao CORB không xuất hiện trên XHR khác mà tôi không biết; tại sao các thay đổi lại hiển thị lỗi này tôi không biết). Đó là lý do tại sao tôi đã kiểm tra toàn bộ mã nhiều lần trong vài giờ và mất rất nhiều thời gian.

Nếu bạn làm điều đó trong safari thì sẽ không mất thời gian, chỉ cần kích hoạt menu nhà phát triển từ Preferences >> Privacy và bỏ chọn "Vô hiệu hóa hạn chế nguồn gốc chéo" từ menu phát triển. Nếu bạn chỉ muốn cục bộ, thì bạn chỉ cần bật menu nhà phát triển và chọn "Tắt các hạn chế tệp cục bộ" từ menu phát triển.

và trong Chrome cho OSX mở Terminal và chạy:

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

--user-data-dir được yêu cầu trên Chrome 49+ trên OSX

Đối với Linux chạy:

$ google-chrome --disable-web-security

Ngoài ra nếu bạn đang cố gắng truy cập các tệp cục bộ cho mục đích phát triển như AJAX hoặc JSON, bạn cũng có thể sử dụng cờ này.

-–allow-file-access-from-files

Đối với Windows, hãy vào dấu nhắc lệnh và đi vào thư mục chứa Chrome.exe và nhập

chrome.exe --disable-web-security

Điều đó sẽ vô hiệu hóa chính sách nguồn gốc tương tự và cho phép bạn truy cập các tệp cục bộ.

Tôi gặp phải vấn đề này vì định dạng của phản hồi jsonp từ máy chủ là sai. Các phản ứng không chính xác như sau.

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

Vấn đề là, đối tượng bên trong callbackphải là một đối tượng json chính xác, thay vì một mảng json. Vì vậy, tôi đã sửa đổi một số mã máy chủ và thay đổi định dạng của nó:

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

Trình duyệt vui vẻ chấp nhận phản hồi sau khi sửa đổi.

Hãy thử cài đặt tiện ích mở rộng "Moesif CORS" nếu bạn gặp phải sự cố trong google chrome. Vì nó là yêu cầu nguồn gốc chéo, vì vậy chrome không chấp nhận phản hồi ngay cả khi mã trạng thái phản hồi là 200