Soru Postacı neden desteklenmiyorsa, JavaScript'im neden istenen kaynakta bir "Erişim Denetimi-İzin-Kökeni" üstbilgisi var "hatası veriyor?


Kullanarak yetkilendirme yapmaya çalışıyorum JavaScript bağlayarak RESTful  API yerleşik Flask. Ancak, istekte bulunduğumda, aşağıdaki hatayı alıyorum:

XMLHttpRequest yüklenemiyor http: // myApiUrl / login. İstenen kaynakta 'Erişim-Kontrol-İzin-Kökeni' başlığı yok. Origin 'null' bu nedenle erişime izin verilmiyor.

API'nın veya uzak kaynağın üstbilgiyi ayarlaması gerektiğini biliyorum, ancak isteği siz Chrome uzantısıyla yaptığımda neden işe yarayacak? postacı?

Bu istek kodudur:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

1869
2017-11-17 19:29


Menşei


Localhost’tan mi yoksa direk olarak HTML’yi mi yürütüyorsunuz? - MD. Sahib Bin Mahboob
@ MD.SahibBinMahboob Sorunuzu anlıyorsam, localhost'tan istekte bulunuyorum - Bilgisayarımda bir sayfam var ve sadece onu çalıştırıyorum. Siteyi siteye dağıtırken aynı sonucu verdi. - Mr Jedi
yürütülen sayfanızın ve istenen alan adının alan adı aynı mı yoksa farklı mı? - MD. Sahib Bin Mahboob
çok ilgili: stackoverflow.com/questions/10143093/... - cregox
Daha fazla okuma isteyen herkes için MDN, ajax ve cross origin istekleriyle ilgili iyi bir makaleye sahiptir: developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS - Sam Eaton


Cevaplar:


Eğer anladım doğru bir XMLHttpRequest sayfanızdakinden farklı bir alana. Bu yüzden tarayıcı, güvenlik nedenleriyle aynı kaynaktan gelen bir talebe izin verdiği için onu engelliyor. Etki alanları arası bir istek yapmak istediğinizde farklı bir şey yapmanız gerekir. Bunun nasıl elde edileceği hakkında bir eğitim CORS Kullanımı.

Postacıyı kullandığınızda, bu politika tarafından kısıtlanmaz. Den alıntıdır Çapraz Kaynaklı XMLHttpRequest:

Normal web sayfaları uzak sunuculardan veri göndermek ve almak için XMLHttpRequest nesnesini kullanabilir, ancak aynı kaynak politikasıyla sınırlıdır. Uzantılar çok sınırlı değil. Bir uzantı, öncelikle kökeni izinleri istediği sürece, uzak sunucularla kökeninin dışında konuşabilir.


1008
2017-11-17 19:49



Haklısın. Sayfamdan farklı bir alana istekte bulunuyorum. API sunucuda ve localhost'tan istek istiyorum. Cevabı kabul etmeden önce, "talebi doğrudan yürütme" nin ne anlama geldiğini bana açıklayabilir misiniz? POSTMAN alan adı kullanmıyor mu? - Mr Jedi
Tarayıcı isteği engellemiyor. Çapraz kaynaklı ajax isteklerini engelleyen tek tarayıcılar IE7 veya daha eskidir. IE7 ve üstü dışındaki tüm tarayıcılar CORS özelliklerini (kısmen IE8 ve IE9) uygular. Tek yapmanız gereken, API başlıklı sunucunuzdaki CORS taleplerine, istek üzerine uygun başlıkların geri dönmesidir. CORS kavramlarını okumalısınız. mzl.la/VOFrSz. Postacı XHR aracılığıyla da istekleri gönderir. Postacı kullanırken aynı sorunu görmüyorsanız, aynı isteği bildirmeden postacı aracılığıyla göndermediğiniz anlamına gelir. - Ray Nicholus
@ MD.SahibBinMahboob Postman "java / python" kodunuzdan bir istek göndermiyor. İsteği doğrudan tarayıcıdan gönderiyor. Chrome uzantılarındaki XHR, özellikle çapraz kaynaklı istekler söz konusu olduğunda biraz daha farklı çalışır. - Ray Nicholus
@yves, aslında kuralı dayatan tarayıcıdır. Yani tarayıcı yerine herhangi bir yerden istek başlatılması dosya çalışmalıdır - MD. Sahib Bin Mahboob
@SuhailGupta, sunucunuzdaki kökenlere izin verirseniz, aslında CORS olarak bilinen isteği gerçekleştirmesine izin verilir. - MD. Sahib Bin Mahboob


Bu, üretim için bir düzeltme değildir veya uygulamanın istemciye gösterilmesi gerektiğinde, bu yalnızca UI ve Backend olduğunda yararlıdır gelişme  farklı olan sunucular ve üretimde aslında aynı sunucuda. Örneğin: Herhangi bir uygulama için UI geliştirirken, yerel olarak arka uç sunucusuna işaretlemenin sınanması gerekiyorsa, bu senaryoda bu mükemmel bir çözümdür. Üretim düzeltmesi için, çapraz kaynak erişimine izin vermek için CES başlıklarının arka uç sunucusuna eklenmesi gerekir.

Kolay yol, CORS kullanarak erişime izin vermek için eklentiyi google chrome'a ​​eklemektir.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Bu uzantıyı hiçbir zaman erişime izin vermek istediğinizde etkinleştir 'Erişim denetim izin-kökenli' başlık isteği.

Veya 

Windows'da, bu komutu koşmak pencere

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

bu yeni açılacak krom hayır erişim sağlayan tarayıcı 'Erişim denetim izin-kökenli' başlık isteği.


450
2018-03-04 06:42



Bu harika, ancak istemcilerden bir web servisi için dahili bir gereksinimi zorunlu kılmak için kromu bu şekilde başlatmaları istenemez. - Taersious
Bu, bir yanıt olarak kabul edilmemeli, CORS'yi anlamak ve uygulamanızı düzeltmek yerine uygulamanızı düzeltmek için üçüncü taraf eklenti yüklemek, diğer kişilerin api'lerini nasıl kullanacağı? hepsini bu eklentiyi yükler misiniz - James Kirkby
Bu uzantıyı yükledim ve istekte bulundu, kemancıdaki isteği kontrol ettim, aşağıdaki belirtildi: -> Menşei: evil.com . Bu uzantının Kökeni değiştirdiği anlaşılıyor. evil.com - wagwanJahMan
Bu uzantı bir çekicilik gibi çalışıyor. Ama gerçekten dahili olarak ne yapıyorlar? Bir eklenti kullanmak yerine Javascript veya Jquery tarzında aynı şeyi yapmanın bir yolu var mı? - sms
Bence bu gerçekten harika bir cevap Kalıcı bir düzeltmeye ihtiyacınız yoksa veya sadece CORS geçici olarak devre dışı bırakmanız gerekiyorsa. İhtiyacım olan buydu ve bu çözüm harika çalıştı. Açıkçası, bu asla kalıcı bir çözüm olarak düşünülemez. - jtcotton63


Bununla başa çıkabilirseniz JSON karşılığında, sonra kullanmayı deneyin JSONP (not P son olarak) alanlar arasında konuşmak için:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

JSONP ile çalışma hakkında daha fazla bilgi edinin. İşte:

JSONP'ın ortaya çıkması - esasen mutabakata dayalı bir siteler arası komut dosyası hacki - güçlü içerikli içeriklere kapıyı açtı. Pek çok önemli site, önceden tanımlanmış bir API yoluyla içeriğine erişmenizi sağlayan JSONP hizmetleri sağlar.


312
2018-02-22 00:42



Jsonp'un POST içeriği için çalışmadığına dikkat edin. Daha fazla tartışma İşte. - Prabu Raja
Bu POST istekleri ile jsonp kullanamazsınız zaman bu kadar çok oy var?!?! - fatlog
Kullandığında JSONP, $ .ajax yoksayılacak typebu yüzden her zaman GET Bu cevap her zaman işe yarayacak demektir. - noob
200'den fazla kişiye benzemiyor. - cs01
Ayrıca JSONP'ın JSON ile doğrudan değiştirilemeyeceğini de unutmayın. İhtiyacın var sunucu JSONP biçimindeki verileri de döndürmek için. Sadece değiştirerek dataType AJAX istek ayarlarında tek başına çalışmayacak. - Rory McCrossan


Kullanıyorsanız çözmek çok basit PHP. PHP sayfanızın başına aşağıdaki senaryoyu ekleyin:

<?php header('Access-Control-Allow-Origin: *'); ?>

Uyarı: Bu, PHP dosyanızın saldırganlar tarafından çağrılabileceği bir güvenlik sorunu içeriyor. Dosya / hizmetinizi bu saldırıya karşı engellemek için oturumlar ve kimlik doğrulamaları için tanımlama bilgilerini kullanmanız gerekir. Hizmetiniz savunmasız siteler arası talep sahteciliği (CSRF).

Eğer kullanıyorsanız Düğüm-kırmızı CORS'e izin vermelisiniz node-red/settings.js Aşağıdaki satırları yorumlayarak dosya:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

185
2017-12-03 20:24



Soru, PHP ile ilgili değildi. - mknaf
ve güvenli değil - llazzaro
Yapmamalısın kapat CORS çünkü onun ne için olduğunu bilmiyorsun. Bu korkunç bir cevap. - meagar♦
Güvende olmamasına rağmen, soru güvenlikle ilgili değildi, ancak görevi nasıl yerine getirdi. Bu, etki alanı tabanlı AJAX istekleriyle çalışırken geliştiricinin seçmesi gereken seçeneklerden biridir. Sorunu çözmeme yardımcı oldu ve başvurum için verilerin nereden geldiğini umursamıyorum. Hedef girişi üzerinde PHP ile tüm girdileri dezenfekte ederim, bu yüzden birisi ona biraz önemsiz posta göndermek istiyorsa, denemelerine izin verin. Buradaki ana nokta, hedef alandan etki alanları arası AJAX'a izin verilebilir. Cevap için +1. - ZurabWeb
Piero'nun verdiği genel mesajla aynı fikirdeyim, özellikle de güvenlikle ilgili değil, ama güvenlik endişe kaynağı. Sanırım bunun en azından "Bu genelde kötü! Yaptığını bilmedikçe bunu yapmayın! İşte bununla ilgili daha fazla dokümantasyon: ...", ve belki de nedenini kısaca açıklayınız. Birinin buraya gelmesinden nefret ediyorum ve sadece "Oh, bu başlığı ekleyebilirim / ayarlayabilirim ve iyiyim" diye düşünürüm. ve tam sonuçları bilmiyorum. Demek istediğim, bir çeşit araştırma yapması gerekiyor, ama yine de. - Thomas F.


Birisi bu siteyi uzun zaman önce benimle paylaşmayı diliyorum http://cors.io/ Kendi vekilimi inşa etmek ve ona güvenmekle karşılaştırıldığında bir ton zaman kazandırabilirdi. Ancak, üretime geçtiğinizde, verilerinizin tüm yönlerini hala kontrol ettiğinizden, kendi proxy'nizi almak en iyi oyundur.

Tüm istediğin:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


143
2017-07-21 22:08



Bunun downsides nelerdir? Bu adamlar verilere müdahale mi ediyor? - Sebastialonso
cors.io/?u=HTTP_YOUR_LINK_HERE     (küçük düzeltme) - jkpd
Verilerinizi 3. taraf vekiline göndermenin iyi bir fikir olduğunu düşünmüyorum. - Daniel Alexandrov
Bir dezavantajı, şu anda olduğu gibi bazen aşırı yükleniyorlar. This application is temporarily over its serving quota. Please try again later. - Daniel Hickman
sende dene https://crossorigin.me/http://example.com - KingRider


Ajax kullanarak bir alan-arası sorun var. Dosyalarınıza aynı şekilde eriştiğinizden emin olmalısınız. http:// yolu olmayan www. (ya da http://www. ve dahil olmak üzere aynı yola gönderin www.) tarayıcının, bir www. yol, sorunun nerede olduğunu görüyorsunuz. Farklı bir alana gönderiyorsunuz ve tarayıcı, yayınlama sorunu nedeniyle akışı engelliyor.

Eğer API sizden talep ettiğiniz aynı ana bilgisayarda bulunmaz, akış engellenir ve API ile iletişim kurmanın başka bir yolunu bulmanız gerekir.


61
2018-03-12 08:53



yup, bunu benim telefongap uygulamasında zorladım, var app_url = location.protocol + '//' + location.host + '/ api /. sorun www ile siteydi. Hazırlanan bu hatayı getirecektir. - Sir Lojik


Eğer kullanıyorsanız node.js, dene:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Daha fazla bilgi: ExpressJS'de CORS


55
2018-02-12 16:27



Size oy verdim çünkü tam da ihtiyacım olan şey buydu. Ancak "*" örneğini, herhangi bir bağlantıya izin verileceğini ve üretimde kullanılmaması gerektiğini açıklamaksızın tanıtmanın kötü bir fikir olduğunu düşünün. Bu MDN bağlantısında açıklanmaktadır developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS. - rob
@rob Yorumunuz için teşekkürler. Haklısınız, kaynakları hangi kaynaklardan kullanabileceğimizi belirtmeliyiz. Ancak, kaynakların kamusal amaç için kullanıldığını ve tüketicileri bilmediğimizi düşünürsek, sanırım yanlış olmazsam "*" ile gitmeliyiz. - Nguyen Tran
Bu kavramı kullandım ve sorunum nodejs'de çözüldü. Teşekkürler - Deepak Bhatta
app.use (işlev (req, res, sonraki) {res.setHeader ('Erişim-Denetim-İzin-Kökeni', '*'); res.setHeader ('Erişim-Denetim-İzin-Yöntemleri', 'GET, POST , OPTIONS, PUT, PATCH, DELETE '), res.setHeader (' Erişim-Kontrol-İzin-Başlıkları ',' X-İstenen-ile, içerik-tipi, Yetkilendirme '); res.setHeader (' Erişim-Kontrol-İzin Ver -Kaynaklar ', doğru); if (' OPTIONS '=== req.method) {res.send (204);} else {next ();}}); - Ricky sharma
Kullanım tehlikeleri ile ilgili olarak "Access-Control-Allow-Origin", "*", görmek security.stackexchange.com/a/45677. TLDR: W3 spec aslında şu tavsiyede bulunur: Erişim denetimi kontrolleri olmadan, herkes tarafından erişilebilen bir kaynak, her zaman değeri "*" olan bir Access-Control-Allow-Origin başlığını güvenli bir şekilde iade edebilir. - CODE-REaD


Çünkü
$ .ajax ({type: "POST")  - Aramalar SEÇENEKLER 
$ .post ( - Aramalar POST 

her ikisi de farklı Postman çağrıları "POST" olarak adlandırılıyor ama biz aradığımız zaman "SEÇENEKLER" olacak

C # web hizmetleri için - webapi 

Lütfen aşağıdaki kodu web.config dosyanıza <system.webServer> etiketi altında ekleyin. Bu çalışacak

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Lütfen ajax çağrısında hata yapmadığınızdan emin olun

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Açısal 4 sayı lütfen bakın: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Not: İçerik indirmeyi düşünüyorsanız üçüncü taraf web sitesinden sonra bu sana yardım etmeyecek. Aşağıdaki kodu deneyebilir, ancak JavaScript'i kullanamazsınız.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

41
2017-12-13 13:02



Bu yapılandırma Azure Hizmetlerinde Wordpress'te aynı hatayı çözdü. Teşekkürler. - Andre Mesquita
Dış etki alanlarından gelen istekleri önlemek için belirli bir başlangıç ​​değeri kullanmanızı öneririm. Yani örneğin yerine * kullanım https://www.myotherdomain.com - pechar