Aku telah memanggil pihak ketiga API menggunakan Jquery AJAX. Saya mendapatkan error berikut di console:
Cross-Asal Baca Menghalangi (CORB) diblokir cross-asal respon URL SAYA dengan tipe MIME application/json. Lihat https://www.chromestatus.com/feature/5629709824032768 untuk rincian lebih lanjut.
Saya telah menggunakan kode berikut untuk Ajax call :
$.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 diperiksa di Fiddler, saya punya data di respon tapi tidak di Ajax metode sukses.
Tolong bantu saya keluar.
dataType:'jsonp',
Anda membuat JSONP permintaan, tetapi server menanggapi dengan JSON.
Browser menolak untuk mencoba untuk mengobati JSON sebagai JSONP karena itu akan menjadi resiko keamanan. (Jika browser melakukan mencoba untuk mengobati JSON sebagai JSONP maka akan, di terbaik, gagal).
Lihat pertanyaan untuk rincian lebih lanjut tentang apa yang JSONP ini. Catatan yang jahat hack untuk bekerja di sekitar Asal-usul yang Sama Kebijakan yang digunakan sebelum CORS tersedia. CORS adalah jauh lebih bersih, lebih aman, dan lebih kuat solusi untuk masalah ini.
Itu terlihat seperti anda mencoba untuk membuat salib-asal permintaan dan membuang segala sesuatu yang dapat anda pikirkan di dalam satu tumpukan besar yang saling bertentangan petunjuk.
Anda perlu memahami bagaimana Asal-usul yang Sama kebijakan bekerja.
Lihat pertanyaan untuk panduan mendalam.
Sekarang beberapa catatan tentang kode anda:
contentType: 'application/json',
Menghapus itu.
dataType:'jsonp',
Menghapus ini. (Anda bisa membuat server merespon dengan JSONP bukan, tapi CORS lebih baik).
responseType:'application/json',
Ini bukan pilihan yang didukung oleh jQuery.ajax. Menghapus ini.
xhrFields: { withCredentials: false },
Ini adalah default. Kecuali jika anda mengaturnya dengan benar dengan ajaxSetup, menghapus ini.
header: { 'Access-Control-Memungkinkan-Kredensial' : benar, 'Access-Control-Allow-Origin':'*', 'Access-Control-Memungkinkan-Metode':'MENDAPATKAN', 'Access-Control-Memungkinkan-Header':'application/json', },
Dalam kebanyakan kasus, diblokir respon seharusnya tidak mempengaruhi halaman web's perilaku dan CORB pesan kesalahan ini dapat diabaikan dengan aman. Misalnya, peringatan dapat terjadi dalam kasus-kasus ketika tubuh diblokir respon itu sudah kosong, atau bila respon itu akan disampaikan ke konteks yang dapat't menangani itu (misalnya, sebuah dokumen HTML seperti halaman error 404 yang disampaikan ke tag).
https://www.chromium.org/Home/chromium-security/corb-for-developers
Aku harus membersihkan browser saya's cache, saya membaca di link ini, bahwa, jika permintaan tersebut mendapatkan respon kosong, kita mendapatkan peringatan kesalahan. Saya mendapatkan beberapa CORS pada permintaan saya, dan respon dari permintaan ini mendapat kosong, Semua harus saya lakukan adalah menghapus browser's cache, dan CORS lolos. Saya menerima CORS karena chrome telah menyelamatkan nomor PORT di cache server hanya akan menerima localhost:3010
dan aku melakukan hal localhost:3002
, karena dari cache.
Anda harus menambahkan CORS pada sisi server:
Jika anda menggunakan indonesia maka:
Pertama anda perlu untuk menginstal underwater
dengan menggunakan perintah di bawah ini :
npm install cors --save
Sekarang tambahkan kode berikut untuk aplikasi anda mulai file seperti ( app.js atau 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);
Jika anda bekerja di localhost, coba ini, ini satu-satunya ekstensi dan metode yang bekerja untuk saya (Sudut, hanya javascript, no php)
It's tidak jelas dari pertanyaan, tetapi asumsi ini adalah sesuatu yang terjadi pada pengembangan atau uji klien, dan mengingat bahwa anda sudah menggunakan Fiddler anda dapat memiliki Fiddler merespon dengan memungkinkan respon:
AutoResponder
tabTambahkan Aturan
dan mengedit aturan untuk:Metode:PILIHAN http://localhost
*CORSPreflightAllow
Unmatched request passthrough
Enable
AturanBeberapa catatan:
Tampaknya bahwa peringatan ini terjadi saat mengirim respon yang kosong dengan 200.
Konfigurasi ini pada saya .htaccess
menampilkan peringatan pada 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 untuk
RewriteRule .* / [R=204,L]
menyelesaikan masalah!
Ada sebuah kasus tepi layak disebutkan dalam konteks ini: Chrome (beberapa versi, setidaknya) cek CORS preflights menggunakan algoritma diatur untuk CORB. IMO, ini sedikit konyol karena preflights don't tampaknya mempengaruhi CORB ancaman model, dan CORB tampaknya dirancang untuk menjadi orthogonal untuk CORS. Juga, tubuh CORS preflight tidak dapat diakses, sehingga tidak ada konsekuensi negatif hanya sebuah peringatan menjengkelkan.
Pokoknya, periksa bahwa anda CORS preflight tanggapan (PILIHAN metode respon) don't memiliki tubuh (204). Kosong 200 dengan jenis konten application/octet-stream dan suhu udara turun menjadi nol bekerja dengan baik di sini juga.
Anda dapat mengkonfirmasi jika ini adalah kasus anda memukul dengan menghitung CORB peringatan vs. PILIHAN jawaban dengan isi pesan.
Di ekstensi Chrome, anda dapat menggunakan
chrome.webRequest.onHeadersReceived.addListener
untuk menulis ulang server header respon. Anda dapat mengganti aplikasi yang sudah ada header atau menambahkan sebuah header tambahan. Ini adalah header yang anda inginkan:
Access-Control-Allow-Origin: *
https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived
Aku terjebak di CORB masalah, dan ini tetap untukku.
Cross-Asal Baca Menghalangi (CORB), sebuah algoritma yang meragukan cross-origin resource beban dapat diidentifikasi dan diblokir oleh web browser sebelum mereka mencapai halaman web..Hal ini dirancang untuk mencegah browser untuk menyampaikan tertentu cross-asal jaringan tanggapan untuk halaman web.
Pertama pastikan sumber daya ini disajikan dengan benar "Content-Type
", saya.e, untuk JSON jenis MIME - "text/json
", "application/json
", HTML, tipe MIME - "text/html
".
Kedua: mengatur mode untuk cors saya.e, mode:cors
Ambil akan terlihat seperti ini
fetch("https://example.com/api/request", { metode: 'POST', tubuh: JSON.stringify(data), mode: 'cors', header: { 'Content-Type': 'application/json', "Menerima": 'application/json', } }) .kemudian((data) => data.json()) .kemudian((resp) => console.log(resp)) .menangkap((err) => console.log(err))
https://www.chromium.org/Home/chromium-security/corb-for-developers
Anda tidak dapat memanggil API Pihak ketiga langsung dari client-side(frontend) dari kode Anda. untuk memanggil yang anda butuhkan untuk membuat perubahan dalam Server Tapi tidak dapat Anda lakukan. Di browser, Anda akan mendapatkan respon normal Tapi dari kode Js, Anda tidak akan mendapatkan respon. Coba Link ini Masuk sini
Respon header yang umumnya terletak di server. Set 'Access-Control-Memungkinkan-Header'
ke 'Content-Type'
pada sisi server
Aku punya masalah yang sama dengan saya ekstensi Chrome. Ketika saya mencoba untuk menambahkan saya mewujudkan "content_scripts" opsi bagian ini:
//{
// "matches": [ "<all_urls>" ],
// "css": [ "myStyles.css" ],
// "js": [ "test.js" ]
//}
Dan saya menghapus bagian lain dari saya mewujudkan "hak izin":
"https://*/"
Hanya ketika aku menghapusnya CORB pada salah satu dari saya XHR reqest disappare.
Terburuk dari semua itu ada beberapa XHR reqest dalam kode saya dan hanya satu dari mereka mulai untuk mendapatkan CORB kesalahan (mengapa CORB tidak appare lain XHR saya tidak tahu, mengapa menampakkan perubahan yang disebabkan kesalahan ini saya tidak tahu). Yang's mengapa saya diperiksa seluruh kode lagi dan lagi dengan beberapa jam dan kehilangan banyak waktu.
Jika anda melakukannya dalam safari itu membutuhkan waktu, Hanya memungkinkan pengembang menu dari Preferensi >> Privasi, dan hapus centang "Menonaktifkan Cross-Asal Pembatasan" dari menu mengembangkan. Jika anda ingin lokal saja, maka anda hanya perlu mengaktifkan pengembang menu, dan pilih "Menonaktifkan file lokal pembatasan" dari menu mengembangkan.
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+ pada OSX
Untuk menjalankan Linux:
$ google-chrome --disable-web-security
Juga jika anda're mencoba untuk mengakses file lokal untuk dev keperluan seperti AJAX atau JSON, anda dapat menggunakan bendera ini juga.
-–allow-file-access-from-files
Untuk Windows masuk ke command prompt dan masuk ke folder dimana Chrome.exe dan jenis
chrome.exe --disable-web-security
Yang harus menonaktifkan asal yang sama kebijakan dan memungkinkan anda untuk mengakses file lokal.
Saya mengalami masalah ini karena format jsonp respon dari server adalah salah. Salah tanggap adalah sebagai berikut.
callback(["apple", "peach"])
Masalahnya adalah, objek dalam balik
harus benar-benar json object, bukan json array. Jadi saya memodifikasi beberapa kode server dan mengubah format:
callback({"buah": ["apple", "peach"]})
Browser dengan senang hati menerima tanggapan setelah modifikasi.