Çapraz Kaynak Okuma Engelleme (CORB)

Jquery AJAX kullanarak üçüncü taraf API'yi çağırdım. Konsolda aşağıdaki hatayı alıyorum:

Cross-Origin Read Blocking (CORB) , MIME tipi application / json ile MY URL çapraz kaynak yanıtını engelledi . Daha fazla ayrıntı için https://www.chromestatus.com/feature/5629709824032768 bakın.

Ajax çağrısı için aşağıdaki kodu kullandım:

$.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'ı kontrol ettiğimde, verileri yanıt olarak aldım ama Ajax başarı yönteminde değil.

Lütfen bana yardım edin.

 dataType:'jsonp',

JSONP isteğinde bulunuyorsunuz, ancak sunucu JSON ile yanıt veriyor.

Tarayıcı, bir güvenlik riski oluşturacağından JSON'a JSONP olarak davranmayı reddediyor. (Tarayıcı olursa vermedi JSONP olarak JSON tedavi etmeye o zaman en iyi, başarısız olur).

JSONP'nin ne olduğu hakkında daha fazla ayrıntı için bu soruya bakın . CORS kullanıma sunulmadan önce kullanılan Aynı Köken Politikasını aşmanın kötü bir hack olduğunu unutmayın. CORS, soruna çok daha temiz, daha güvenli ve daha güçlü bir çözümdür.

Görünüşe göre çapraz kaynaklı bir talepte bulunmaya çalışıyorsunuz ve aklınıza gelebilecek her şeyi büyük bir çelişkili talimat yığını halinde atıyorsunuz.

Same Origin politikasının nasıl çalıştığını anlamanız gerekir.

Ayrıntılı bir kılavuz için bu soruya bakın .

Şimdi kodunuz hakkında birkaç not:

contentType: 'application/json',

• JSONP kullandığınızda bu göz ardı edilir
• Bir GET talebinde bulunuyorsunuz. Tipini açıklayacak bir istek gövdesi yok.
• Bu, çapraz kaynak talebini basit olmayan hale getirecektir, yani temel CORS izinlerinin yanı sıra, bir uçuş öncesi ile de ilgilenmeniz gerektiği anlamına gelir.

Kaldır şunu.

 dataType:'jsonp',

• Sunucu JSONP ile yanıt vermiyor.

Bunu kaldır. (Bunun yerine sunucunun JSONP ile yanıt vermesini sağlayabilirsiniz, ancak CORS daha iyidir).

responseType:'application/json',

Bu, jQuery.ajax tarafından desteklenen bir seçenek değildir. Bunu kaldır.

xhrFields: {withCredentials: false},

Bu varsayılandır. AjaxSetup ile doğru olarak ayarlamıyorsanız, bunu kaldırın.

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

• Bunlar yanıt başlıklarıdır. Bunlar talebe değil yanıta aittir.
• Bu, çapraz kaynak talebini basit olmayan hale getirecektir, yani temel CORS izinlerinin yanı sıra, bir uçuş öncesi ile de ilgilenmeniz gerektiği anlamına gelir.

Çoğu durumda, engellenen yanıt web sayfasının davranışını etkilememelidir ve CORB hata mesajı güvenli bir şekilde göz ardı edilebilir. Örneğin, uyarı, engellenen yanıtın gövdesinin halihazırda boş olduğu veya yanıtın işleyemeyen bir bağlama (ör. 404 hata sayfası gibi bir HTML belgesi) iletileceği durumlarda ortaya çıkabilir. bir etikete teslim ediliyor).

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

Tarayıcımın önbelleğini temizlemem gerekiyordu, bu bağlantıyı okudum, eğer istek boş bir yanıt alırsa, bu uyarı hatasını alıyoruz. İsteğim üzerine biraz CORS alıyordum ve bu nedenle bu isteğin yanıtı boştu, Tek yapmam gereken tarayıcının önbelleğini temizlemek oldu ve CORS uzaklaştı. CORS alıyordum çünkü krom PORT numarasını önbelleğe kaydetmişti, Sunucu sadece kabul localhost:3010ediyordu localhost:3002ve önbellek yüzünden yapıyordum .

'Access-Control-Allow-Origin: *' başlıklı yanıtı döndür. Php sunucusu yanıtı için aşağıdaki kodu kontrol edin.

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

Sunucu tarafında CORS eklemelisiniz:

NodeJS kullanıyorsanız, o zaman:

Öncelikle aşağıdaki komutu kullanarak yüklemeniz gerekir cors :

npm install cors --save

Şimdi ( ) gibi uygulamanızın başlangıç ​​dosyasına aşağıdaki kodu ekleyinapp.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);

Sorudan net değil, ancak bunun bir geliştirme veya test istemcisinde olan bir şey olduğunu varsayarsak ve zaten Fiddler'ı kullandığınızı varsayarsak, Fiddler'ın bir izin cevabı ile yanıt vermesini sağlayabilirsiniz:

• Fiddler'da sorun talebini seçin
• AutoResponderSekmeyi açın
• Add RuleKuralı tıklayıp düzenleyin:
  • Yöntem: OPTIONS sunucu url'si burada , örn.Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• Kontrol Unmatched requests passthrough
• Kontrol Enable Rules

Birkaç not:

1. Açıkçası, bu yalnızca API hizmetini değiştirmenin mümkün olmadığı / pratik olmadığı durumlarda geliştirme / test için bir çözümdür.
2. Üçüncü taraf API sağlayıcısıyla yaptığınız tüm sözleşmelerinizin bunu yapmanıza izin verdiğini kontrol edin
3. Diğerlerinin de belirttiği gibi, bu, CORS'un çalışma biçiminin bir parçasıdır ve sonunda başlığın API sunucusunda ayarlanması gerekecektir. Bu sunucuyu kontrol ediyorsanız, başlıkları kendiniz ayarlayabilirsiniz. Bu durumda, üçüncü taraf bir hizmet olduğu için, yalnızca kaynak sitenin URL'sini onlara sağlayabileceğiniz bazı mekanizmalara sahip olduklarını ve hizmetlerini doğru başlıklarla yanıt vermek için buna göre güncelleyeceklerini varsayabilirim.

Localhost üzerinde çalışıyorsanız, bunu deneyin, bu benim için çalışan tek uzantı ve yöntemdir (Angular, yalnızca javascript, php yok)

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

Eğer değiştirmeyi denedim gelmiş dataTypeadresinin ajax isteğinde jsonpiçin json? bu benim durumumda düzeltildi.

Bir Chrome uzantısında kullanabilirsiniz

chrome.webRequest.onHeadersReceived.addListener

sunucu yanıt başlıklarını yeniden yazmak için. Mevcut bir başlığı değiştirebilir veya ek bir başlık ekleyebilirsiniz. İstediğiniz başlık budur:

Access-Control-Allow-Origin: *

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

CORB sorunlarına takılı kaldım ve bu benim için sorunu çözdü.

Yanıt başlıkları genellikle sunucuda ayarlanır. Set 'Access-Control-Allow-Headers'için 'Content-Type'sunucu tarafında

Kaynaklar arası kaynak yüklerinin şüpheli kaynak yüklerinin web sayfasına ulaşmadan önce web tarayıcıları tarafından tanımlanıp engellenmesini sağlayan bir algoritma olan Cross-Origin Read Blocking (CORB) Tarayıcının belirli çapraz orijinli ağ yanıtlarını vermesini önlemek için tasarlanmıştır. bir web sayfasına.

Önce bu kaynakların doğru bir " Content-Type" ile sunulduğundan emin olun , yani JSON MIME türü için - " text/json", " application/json", HTML MIME türü - " text/html".

İkincisi: modu cors olarak ayarlayın, yani, mode:cors

Getirme böyle bir şeye benzeyecekti

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

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

Bu bağlamda bahsetmeye değer bir uç durum vardır: Chrome (en azından bazı sürümler) CORB için ayarlanan algoritmayı kullanarak CORS ön kontrollerini kontrol eder . IMO, bu biraz aptalca çünkü ön uçuşların CORB tehdit modelini etkilemediği görülüyor ve CORB, CORS'a ortogonal olacak şekilde tasarlanmış görünüyor. Ayrıca, bir CORS ön kontrolünün gövdesine erişilemez, bu nedenle olumsuz bir sonuç yoktur, sadece rahatsız edici bir uyarıdır.

Her neyse, CORS ön kontrol yanıtlarınızın (SEÇENEKLER yöntem yanıtları) bir gövdeye (204) sahip olmadığını kontrol edin . İçerik türü uygulaması / sekizli akışı ve sıfır uzunluğu olan boş bir 200 burada da iyi çalıştı.

Bir mesaj gövdesi ile CORB uyarılarını ve OPTIONS yanıtlarını sayarak vurduğunuz durumun bu olup olmadığını doğrulayabilirsiniz.

Görünüşe göre bu uyarı, 200 ile boş bir yanıt gönderirken ortaya çıktı.

Ekranımdaki bu yapılandırma .htaccessChrome'daki uyarıyı gösteriyor:

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]

Ama son satırı değiştirerek

RewriteRule .* / [R=204,L]

sorunu çöz!

Chrome uzantımla aynı sorunu yaşadım. Manifest "content_scripts" seçeneğime bu bölümü eklemeye çalıştığımda:

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

Ve diğer kısmı manifest "izinlerimden" kaldırıyorum:

"https://*/"

Sadece XHR taleplerimden birinde onu sildiğimde CORB kayboluyor.

Hepsinden kötüsü, kodumda birkaç XHR isteği olması ve bunlardan yalnızca birinin CORB hatası almaya başlaması (CORB neden diğer XHR'de görünmüyor bilmiyorum; neden açık değişiklikler bu hataya neden oldu bilmiyorum). Bu yüzden kodun tamamını birkaç saat tekrar tekrar inceledim ve çok zaman kaybettim.

Safari'de yaparsanız, hiç zaman almaz, Tercihler >> Gizlilik'den geliştirici menüsünü etkinleştirmeniz ve geliştirme menüsünden "Çapraz Kökenli Kısıtlamaları Devre Dışı Bırak" seçeneğinin işaretini kaldırmanız yeterlidir. Yalnızca yerel istiyorsanız, yalnızca geliştirici menüsünü etkinleştirmeniz ve geliştirme menüsünden "Yerel dosya kısıtlamalarını devre dışı bırak" ı seçmeniz gerekir.

ve OSX için Chrome'da Terminal'i açın ve çalıştırın:

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

--user-data-dir, OSX üzerinde Chrome 49+ için gereklidir

Linux çalıştırması için:

$ google-chrome --disable-web-security

Ayrıca AJAX veya JSON gibi geliştirme amaçlı yerel dosyalara erişmeye çalışıyorsanız, bu bayrağı da kullanabilirsiniz.

-–allow-file-access-from-files

Windows için komut istemine gidin ve Chrome.exe'nin bulunduğu klasöre gidin ve şunu yazın:

chrome.exe --disable-web-security

Bu, aynı kaynak politikasını devre dışı bırakmalı ve yerel dosyalara erişmenize izin vermelidir.

Sunucudan gelen jsonp yanıtının biçimi yanlış olduğu için bu sorunla karşılaştım. Yanlış cevap aşağıdaki gibidir.

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

Sorun şu ki, içindeki nesne callbackbir json dizisi yerine doğru bir json nesnesi olmalıdır. Bu yüzden bazı sunucu kodunu ve formatını değiştirdim:

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

Tarayıcı, değişiklikten sonra yanıtı memnuniyetle kabul etti.

Google chrome'da sorun yaşıyorsanız "Moesif CORS" uzantısını yüklemeyi deneyin. Çapraz kökenli istek olduğundan, Chrome, yanıt durum kodu 200 olsa bile yanıt kabul etmiyor