Cross-Origin Read Blocking (CORB)

130

Saya telah memanggil API pihak ketiga menggunakan Jquery AJAX. Saya mendapatkan kesalahan berikut di konsol:

Cross-Origin Read Blocking (CORB) memblokir respons lintas-sumber MY URL dengan aplikasi tipe MIME / json. Lihat https://www.chromestatus.com/feature/5629709824032768 untuk lebih jelasnya.

Saya telah menggunakan kode berikut untuk panggilan 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....=================");
  }
});

Ketika saya memeriksa di Fiddler, saya sudah mendapat data sebagai tanggapan tetapi tidak dalam metode sukses Ajax.

Tolong bantu saya.

Jignesh
sumber
3
Sepertinya API yang Anda panggil belum mengaktifkan tajuk yang diperlukan untuk mengizinkan panggilan lintas domain dari JS. Anda kemungkinan besar harus melakukan panggilan di server sebagai gantinya. Apakah Anda yakin bahwa tanggapannya adalah JSONP dan bukan JSON biasa? Perhatikan juga bahwa header yang Anda tambahkan dalam permintaan harus ditempatkan sebagai respons dari server.
Rory McCrossan
3
Sudahkah Anda memecahkan kesalahan atau peringatan CORB ini? Saya mengalami hal yang sama dengan modul permintaan.
Sherwin Ablaña Dapito
3
@ SherwinAblañaDapito jika Anda masih mencari solusi, lihat jawaban saya untuk lingkungan pengembangan / pengujian
Colin Young
1
Untuk mendemonstrasikan bagaimana JS Anda dapat bekerja dengan benar, Anda dapat memulai Chrome dalam mode tidak aman chrome.exe --user-data-dir = "C: / Chrome dev session" --disable-web-security Tapi "Baca Blokir (CORB) respons lintas-asal yang diblokir " harus diperbaiki di sisi server.
Ruslan Novikov

Jawaban:

37
 dataType:'jsonp',

Anda membuat permintaan JSONP, tetapi server merespons dengan JSON.

Browser menolak untuk mencoba memperlakukan JSON sebagai JSONP karena ini akan berisiko keamanan. (Jika browser tidak mencoba untuk mengobati JSON sebagai JSONP maka akan, di terbaik, gagal).

Lihat pertanyaan ini untuk detail lebih lanjut tentang apa itu JSONP. Perhatikan bahwa ini adalah peretasan yang buruk untuk mengatasi Kebijakan Asal yang Sama yang digunakan sebelum CORS tersedia. CORS adalah solusi yang jauh lebih bersih, lebih aman, dan lebih kuat untuk masalah ini.


Sepertinya Anda mencoba membuat permintaan lintas sumber dan membuang semua yang terpikirkan oleh Anda dalam satu tumpukan besar instruksi yang saling bertentangan.

Anda perlu memahami cara kerja kebijakan Asal yang Sama.

Lihat pertanyaan ini untuk panduan mendalam.


Sekarang beberapa catatan tentang kode Anda:

contentType: 'application/json',
  • Ini diabaikan saat Anda menggunakan JSONP
  • Anda membuat permintaan GET. Tidak ada badan permintaan untuk menjelaskan jenisnya.
  • Ini akan membuat permintaan lintas asal menjadi tidak sederhana, yang berarti bahwa selain izin CORS dasar, Anda juga perlu berurusan dengan pra-penerbangan.

Hapus itu.

 dataType:'jsonp',
  • Server tidak merespons dengan JSONP.

Pindahkan ini. (Anda dapat membuat server merespons dengan JSONP, tetapi CORS lebih baik).

responseType:'application/json',

Ini bukan opsi yang didukung oleh jQuery.ajax. Pindahkan ini.

xhrFields: {withCredentials: false},

Ini adalah defaultnya. Kecuali Anda menyetelnya ke true dengan ajaxSetup, hapus ini.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • Ini adalah header tanggapan. Mereka termasuk dalam respons, bukan permintaan.
  • Ini akan membuat permintaan lintas asal menjadi tidak sederhana, yang berarti bahwa selain izin CORS dasar, Anda juga perlu berurusan dengan pra-penerbangan.
Quentin
sumber
20

Dalam kebanyakan kasus, respons yang diblokir seharusnya tidak memengaruhi perilaku halaman web dan pesan kesalahan CORB dapat diabaikan dengan aman. Misalnya, peringatan dapat terjadi jika isi respons yang diblokir sudah kosong, atau saat respons akan dikirim ke konteks yang tidak dapat menanganinya (misalnya, dokumen HTML seperti halaman kesalahan 404 sedang dikirim ke tag).

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

Saya harus membersihkan cache browser saya, saya membaca di tautan ini, bahwa, jika permintaan mendapat respons kosong, kami mendapatkan kesalahan peringatan ini. Saya mendapatkan beberapa CORS atas permintaan saya, sehingga respons dari permintaan ini menjadi kosong, Yang harus saya lakukan hanyalah menghapus cache browser, dan CORS tersebut berhasil lolos. Saya menerima CORS karena chrome telah menyimpan nomor PORT pada cache, Server hanya akan menerima localhost:3010dan saya melakukannya localhost:3002, karena cache.

Alex
sumber
12

Tanggapan balasan dengan header 'Access-Control-Allow-Origin: *' Periksa kode di bawah ini untuk tanggapan server Php.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 
Jestin
sumber
2
Tanggapan Anda hanya membantu saya BANYAK !!! Saya tidak bisa cukup berterima kasih. Saya akan terus meneliti apa yang dilakukan "Access Control Allow Origin" jadi saya memahami konsekuensinya tetapi saya hanya mempelajari dasar-dasar membuat layanan web PHP dan ini membantu saya seperti Anda tidak akan percaya. TERIMA KASIH!!!
Adam Laurie
Ini sama sekali tidak mengatasi masalah. Ini adalah kesalahan CORB yang disebabkan oleh pengiriman tanggapan dengan Content-Type: application/jsondi dalamnya. Kode OP pasti sudah melakukan ini.
Quentin
1
@Quentin, ??? Akal sehat menyatakan bahwa selama Anda memiliki Izinkan Asal, browser akan mengizinkan permintaan terlepas dari header / badan yang mencurigakan.
Pacerier
7

Anda harus menambahkan CORS di sisi server:

Jika Anda menggunakan nodeJS maka:

Pertama, Anda perlu menginstal cors dengan menggunakan perintah di bawah ini:

npm install cors --save

Sekarang tambahkan kode berikut ke file awal aplikasi Anda seperti ( 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);
Shubham Verma
sumber
22
Jika Anda perlu menambahkan ekstensi untuk memperbaiki masalah Anda, Anda salah menangani permintaan di sisi server. Hanya sebuah catatan.
Alexander Falk
2
Tidak mungkin meminta basis pengguna saya memasang ekstensi Chrome yang aneh. Bagaimana dengan browser lain?
Israel Rodriguez
2
Meskipun jawaban ini tidak menyelesaikan masalah dalam jangka panjang, itu menggunakan plugin ini yang memverifikasi kepada rekan kerja saya bahwa itu adalah masalah CORS. Jadi suara positif untuk itu!
KoldBane
2
@VladimirNul jawaban asli adalah tentang ekstensi chrome. Shubham menulis ulang itu. Tolong periksa riwayatnya.
Israel Rodriguez
3
Ada beberapa kebingungan di sini. OP mengacu pada CORB dan bukan CORS.
Bukan mesin
3

Tidak jelas dari pertanyaannya, tetapi dengan asumsi ini adalah sesuatu yang terjadi pada klien pengembangan atau pengujian, dan mengingat bahwa Anda sudah menggunakan Fiddler, Anda dapat meminta Fiddler merespons dengan memungkinkan respons:

  • Pilih permintaan masalah di Fiddler
  • Buka AutoRespondertab
  • Klik Add Ruledan edit aturan ke:
    • Metode: OPTIONS url server di sini , misMethod:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Memeriksa Unmatched requests passthrough
  • Memeriksa Enable Rules

Beberapa catatan:

  1. Jelas ini hanya solusi untuk pengembangan / pengujian di mana tidak mungkin / praktis untuk mengubah layanan API
  2. Periksa apakah perjanjian apa pun yang Anda miliki dengan penyedia API pihak ketiga memungkinkan Anda melakukan ini
  3. Seperti yang telah dicatat orang lain, ini adalah bagian dari cara kerja CORS, dan pada akhirnya header perlu disetel di server API. Jika Anda mengontrol server tersebut, Anda dapat menyetel sendiri headernya. Dalam kasus ini karena ini adalah layanan pihak ketiga, saya hanya dapat berasumsi bahwa mereka memiliki beberapa mekanisme di mana Anda dapat memberikan mereka URL dari situs asal dan mereka akan memperbarui layanan mereka sesuai untuk merespon dengan header yang benar.
Colin Young
sumber
2

sudahkah Anda mencoba mengubah dataTypepermintaan ajax Anda dari jsonpmenjadi json? yang memperbaikinya dalam kasus saya.

Cla
sumber
2

Di ekstensi Chrome, Anda dapat menggunakan

chrome.webRequest.onHeadersReceived.addListener

untuk menulis ulang header respons server. Anda dapat mengganti header yang sudah ada atau menambahkan header tambahan. Ini adalah tajuk yang Anda inginkan:

Access-Control-Allow-Origin: *

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

Saya terjebak pada masalah CORB, dan ini memperbaikinya untuk saya.

stepper
sumber
1
"Mulai dari Chrome 72, jika Anda perlu mengubah tanggapan sebelum Cross Origin Read Blocking (CORB) dapat memblokir tanggapan, Anda perlu menentukan 'extraHeaders' di opt_extraInfpSpec." dari dokumen webRequests
swisswiss
0

Header respons biasanya disetel di server. Setel 'Access-Control-Allow-Headers'ke 'Content-Type'di sisi server

lifeLearner007
sumber
7
Saya menggunakan API pihak ketiga. Jadi saya tidak bisa melakukan itu. Tolong beri saya solusi dari sisi klien.
Jignesh
4
Server memutuskan apa yang diizinkan dan apa yang tidak. Hanya server yang memiliki akses itu. Mengontrol header respons dari sisi klien adalah risiko keamanan. Tugas sisi klien adalah mengirim permintaan yang tepat dan kemudian mendapatkan respons apa pun yang dikirim oleh server. Lihat ini: stackoverflow.com/questions/17989951/...
lifetimeLearner007
48
Ini CORB, bukan CORS.
Joaquin Brandan
0

Cross-Origin Read Blocking (CORB), sebuah algoritme yang dengannya muatan sumber daya lintas-sumber yang meragukan dapat diidentifikasi dan diblokir oleh browser web sebelum mencapai halaman web..itu dirancang untuk mencegah browser mengirimkan respons jaringan lintas-asal tertentu ke halaman web.

Pertama Pastikan sumber daya ini disajikan dengan " Content-Type" yang benar , yaitu, untuk jenis MIME JSON - " text/json", " application/json", jenis MIME HTML - " text/html".

Kedua: set mode ke cors yaitu, mode:cors

Pengambilannya akan terlihat seperti ini

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

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

Nikil Munireddy
sumber
0

Ada kasus tepi yang perlu disebutkan dalam konteks ini: Chrome (setidaknya beberapa versi) memeriksa prapenerbangan CORS menggunakan algoritme yang disiapkan untuk CORB . IMO, ini agak konyol karena preflight tampaknya tidak memengaruhi model ancaman CORB, dan CORB tampaknya dirancang agar ortogonal dengan CORS. Selain itu, badan preflight CORS tidak dapat diakses, jadi tidak ada konsekuensi negatif yang hanya berupa peringatan yang mengganggu.

Bagaimanapun, periksa apakah tanggapan preflight CORS Anda (tanggapan metode OPTIONS) tidak memiliki isi (204) . 200 kosong dengan aplikasi tipe konten / aliran oktet dan panjang nol juga bekerja dengan baik di sini.

Anda dapat mengonfirmasi apakah ini kasus Anda dengan menghitung peringatan CORB vs. respons OPTIONS dengan badan pesan.

Simon Thum
sumber
0

Tampaknya peringatan ini terjadi saat mengirimkan respons kosong dengan 200.

Konfigurasi ini di .htaccesstampilan saya peringatan di 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]

Tapi mengubah baris terakhir menjadi

RewriteRule .* / [R=204,L]

selesaikan masalahnya!

fluminis
sumber
-2

Saya memiliki masalah yang sama dengan ekstensi Chrome saya. Ketika saya mencoba menambahkan opsi "content_scripts" manifes saya bagian ini:

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

Dan saya menghapus bagian lain dari "izin" manifes saya:

"https://*/"

Hanya ketika saya menghapusnya, CORB di salah satu permintaan XHR saya tidak setuju.

Terburuk dari semua yang ada beberapa XHR reqest dalam kode saya dan hanya satu dari mereka mulai mendapatkan kesalahan CORB (mengapa CORB tidak muncul di XHR lain Saya tidak tahu; mengapa perubahan nyata menyebabkan kesalahan ini, saya tidak tahu). Itulah mengapa saya memeriksa seluruh kode berulang kali dalam beberapa jam dan kehilangan banyak waktu.

Олег Хитрень
sumber
Ada beberapa masalah dengan tajuk di sisi server. Saya mengubah nilai kembali ASP.NET saya menjadi: asinkron publik Tugas <string> Dapatkan (string TM) Nilai kembali beberapa saat yang lalu JSON (jenis konten saya kira "application / json") dan sekarang yang lain (mungkin "teks /polos"). Dan itu membantu. Sekarang saya mengembalikan "izin" manifes ke "https: // * /" dan berhasil.
Олег Хитрень
-3

Jika Anda melakukannya dalam safari, tidak perlu waktu, Cukup aktifkan menu pengembang dari Preferensi >> Privasi, dan hapus pilihan "Nonaktifkan Pembatasan Lintas-Asal" dari menu kembangkan. Jika Anda ingin hanya lokal, maka Anda hanya perlu mengaktifkan menu pengembang, dan pilih "Nonaktifkan pembatasan file lokal" dari menu kembangkan.

dan di Chrome untuk OSX buka Terminal dan jalankan:

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

--user-data-dir diperlukan pada Chrome 49+ di OSX

Untuk Linux, jalankan:

$ google-chrome --disable-web-security

Juga jika Anda mencoba mengakses file lokal untuk tujuan dev seperti AJAX atau JSON, Anda juga dapat menggunakan flag ini.

-–allow-file-access-from-files

Untuk Windows masuk ke command prompt dan masuk ke folder tempat Chrome.exe dan ketik

chrome.exe --disable-web-security

Itu harus menonaktifkan kebijakan asal yang sama dan memungkinkan Anda untuk mengakses file lokal.

Muhammad Haris Baig
sumber
-3

Saya mengalami masalah ini karena format respons jsonp dari server salah. Tanggapan yang salah adalah sebagai berikut.

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

Masalahnya adalah, objek di dalamnya callbackharus berupa objek json yang benar, bukan array json. Jadi saya memodifikasi beberapa kode server dan mengubah formatnya:

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

Browser dengan senang hati menerima respon setelah modifikasi.

Searene
sumber
callback(["apple", "peach"])adalah JSONP yang benar-benar valid, dan berfungsi dengan baik saat saya mengujinya di berbagai sumber.
Quentin
-4

Coba instal ekstensi "Moesif CORS" jika Anda menghadapi masalah di google chrome. Karena ini adalah permintaan lintas sumber, maka chrome tidak menerima tanggapan meskipun kode status tanggapannya adalah 200

Madhurish Gupta
sumber