Cross-Origin Read Blocking (CORB)

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.

 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.

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.

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

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

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.

Jika Anda bekerja di localhost, coba ini, ini satu-satunya ekstensi dan metode yang berfungsi untuk saya (Angular, hanya javascript, tanpa php)

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

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

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.

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

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

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.

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!

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.

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.

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.

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