it-swarm-tr.com

Postman'ın göndermemesi neden JavaScript'im neden istenen kaynak üzerinde "Erişim Kontrolü-İzin Verme-Orijini Yok" başlığı var "başlığı alıyor?

JavaScriptRESTfulAPI yerleşik Flask ile bağlanarak yetkilendirme yapmaya çalışıyorum. Ancak, isteği yaptığımda aşağıdaki hatayı alıyorum:

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

API veya uzak kaynağın başlığı ayarlaması gerektiğini biliyorum, ancak isteği Chrome uzantısı Postacı üzerinden istediğimde neden çalıştı?

Bu istek kodu:

$.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);
    });
2143
Mr Jedi

Bunu doğru anladıysam, sayfanızda olduğundan farklı bir alana XMLHttpRequest yapıyorsunuz. Bu nedenle, tarayıcı güvenlik nedenleriyle genellikle aynı Köken'deki bir talebe izin verdiği için engelliyor. Etki alanları arası bir istek yapmak istediğinizde farklı bir şey yapmanız gerekir. Bunun nasıl sağlanacağı hakkında bir eğitim. CORS kullanma.

Postacı kullanırken, bu politika tarafından sınırlandırılmazlar. Alıntılanan Çapraz Kaynak XMLHttpRequest:

Normal web sayfaları, uzak sunuculardan veri göndermek ve almak için XMLHttpRequest nesnesini kullanabilir, ancak aynı Köken ilkesiyle sınırlıdır. Uzantılar çok sınırlı değil. Bir uzantı, ilk önce Çapraz Kaynak izinleri istediği sürece, Kökeni dışındaki uzak sunucularla konuşabilir.

1124

Bu, üretim için bir düzeltme değildir veya uygulamanın müşteriye gösterilmesi gerektiğinde, bu yalnızca UI ve Backend development farklı sunucularda ve üretimde gerçekte aynı sunucudayken yardımcı olur. Örneğin: Herhangi bir uygulama için UI geliştirirken yerel olarak arka uç sunucusuna işaret etmek için test etmek gerekirse, bu senaryoda bu mükemmel bir çözümdür. Üretim düzeltmesi için, Çapraz Kaynak erişimine izin vermek için arka uç sunucusuna CORS başlıklarının eklenmesi gerekir.

Kolay yol CORS kullanarak erişime izin vermek için uzantıyı Google Chrome'a ​​eklemektir.

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

Yalnızca 'access-control-allow-Origin' başlık isteğine erişime izin vermek istemiyorsanız bu uzantıyı etkinleştirin.

Veya 

Windows'ta bu komutu run penceresine yapıştırın 

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

bu, 'access-control-allow-Origin' başlık isteğine erişime izin vermeyen yeni bir chrome tarayıcı açar.

485
shruti

Eğer JSON ile başa çıkabilirseniz, alanlar arasında konuşma yapmak için JSONP (sonunda P notunu kullanın):

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

JSONP ile çalışmak hakkında daha fazla bilgi edinin burada :

JSONP'in ortaya çıkışı - esasen fikir birliği olan siteler arası komut dosyası yazma kesmesi - içeriğin güçlü bir araya gelmesine kapı açtı. Birçok önde gelen site, JSONP hizmetleri sağlayarak içeriğine önceden tanımlanmış bir API ile erişmenize olanak tanır.

322
Gavin

PHP kullanıyorsanız çözümü çok basit. İsteği işleyen PHP sayfanızın başına aşağıdaki betiği eklemeniz yeterlidir:

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

Uyarı: Bu, PHP dosyanız için saldırganlar tarafından aranabileceği bir güvenlik sorunu içeriyor. Bu saldırıya karşı dosya/hizmetinizi önlemek için kimlik doğrulama için oturumlar ve çerezler kullanmanız gerekir. Hizmetiniz siteler arası sahtecilik isteği sahteciliği (CSRF) karşı savunmasızdır.

Eğer Node-red kullanıyorsanız, aşağıdaki satırları yorumlayarak CORS'un node-red/settings.js dosyasında olmasına izin vermelisiniz:

// 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"
},
200
shady sherif

Birisinin bu siteyi benimle uzun zaman önce paylaşmasını diliyorum http://cors.io/ kendi vekilime dayanarak geliştirmek ve güvenmekle kıyaslandığında çok zaman kazandıracaktı. Ancak, üretime geçtiğinizde, kendi proxy'nize sahip olmak, verilerinizin tüm yönlerini hala kontrol ettiğiniz için en iyi bahistir.

Tüm istediğin:

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

168
yoshyosh

Eğer Node.js kullanıyorsanız, deneyin:

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'teki CORS

67
Nguyen Tran

Ajax'ı kullanan bir etki alanları arası sorunu var. Dosyalarınıza http:// olmadan (veya www. adresinden erişip http://www. dahil aynı yola gönderin), www. yolu üzerinden erişirken tarayıcının başka bir etki alanı olarak gördüğü, aynı www. yolunda eriştiğinizden emin olmalısınız; olduğunu. Farklı bir etki alanına gönderiyorsunuz ve tarayıcı Menşe sorunu nedeniyle akışı engelliyor.

API , sizden istediğiniz ana makineye yerleştirilmezse, akış engellenir ve API ile iletişim kurmanın başka bir yolunu bulmanız gerekir.

63
Alin Razvan

Çünkü 
$ .ajax ({type: "POST"} _ - OPTIONS çağrıları 
$ .post ( - POST çağrıları 

her ikisi de farklı Postacılar düzgün "POST" çağırır, ancak aradığımızda "SEÇENEKLER" olacaktır

C # web servisleri için - webapi 

Lütfen aşağıdaki kodu <system.webServer> etiketi altındaki web.config dosyanıza 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ısı lütfen bakınız: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Not: İçerik indirmeyi arıyorsanız, üçüncü taraf web sitesinden sonra bu size yardımcı olmayacaktır. Aşağıdaki kodu deneyebilirsiniz, ancak JavaScript'i deneyemezsiniz.

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

Deneyin XDomain ,

Özet: Saf bir JavaScript CORS alternatifi/çoklu doldurma. Sunucu yapılandırması gerekmez - iletişim kurmak istediğiniz etki alanına bir proxy.html ekleyin. Bu kütüphane tüm XHR 'yi bağlamak için XHook kullanır, bu yüzden XDomain herhangi bir kütüphane ile birlikte çalışmalıdır.

22
user3359786

Eğer istemiyorsan:

  1. Chrome'da web güvenliğini devre dışı bırak
  2. JSONP kullanın
  3. İsteklerinizi yeniden yönlendirmek için üçüncü taraf bir site kullanın

ve sunucunuzda CORS'un etkin olduğundan eminsiniz (burada CORS'u test edin: http://www.test-cors.org/ )

O zaman isteğinizle Origin parametresini girmeniz gerekir .. __ Bu Origin, tarayıcınızın isteğinizle gönderdiği Origin ile eşleşmelidir.

Burada eylem görebilirsiniz: http://www.wikinomad.com/app/detail/Campgrounds/3591

Düzenleme işlevi, veri almak için farklı bir alana GET & POST isteği gönderir. Sorunu çözen Origin parametresini ayarladım .. Arka uç bir mediaWiki motorudur.

tldr: Tarayıcınızın gönderdiği Origin parametresi olması gereken çağrılarınıza "Origin" parametresini ekleyin (Origin parametresini bozamazsınız)

11
Ganesh Krishnan

API'ma erişmek için AngularJS kullandığımda bununla ilgili bir sorunum vardı. Aynı talep SoapUI 5.0 ve ColdFusion'da çalıştı. GET yöntemimde zaten Access-Control-Allow-Origin başlığı vardı.

AngularJS bir "deneme" SEÇENEKLERİ isteği yapar öğrendim. ColdFusion, varsayılan olarak, OPTIONS yöntemini oluşturur, ancak özellikle bu başlıklara sahip değildir. Hata, OPTIONS çağrısına yanıt olarak üretildi ve kasıtlı olarak GET'e değil. API’ma aşağıdaki SEÇENEKLER yöntemini ekledikten sonra sorun çözüldü.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

Sunucudan yanıtlar isterken, aynı hatayla sonuçlanan aşağıdaki yapılandırmaya sahiptim.

Sunucu tarafı:SparkJava ->, REST-API'sini sağlar
Müşteri tarafı:ExtJs6 ->, Tarayıcı oluşturmayı sağlar 

Sunucu tarafında Bunu cevaba eklemek zorunda kaldım: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

Müşteri tarafında bu talebe ekle yapmak zorunda kaldım: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

Shruti'nin cevabına dayanarak, gerekli argümanlara sahip bir Chrome tarayıcısı kısayolu oluşturdum: enter image description here enter image description here

8

https://github.com/Rob--W/cors-anywhere/ , kendi CORS proxy sunucunuzu ayarlamak ve çalıştırmak için kullanabileceğiniz (Node.js) kodunu sağlar. Aktif olarak korunur ve proxy davranışını sadece doğru Access-Control-* yanıt başlıklarının temel gönderilmesinin ötesinde kontrol etmek için bir dizi özellik sunar.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS , tarayıcıların, istemci tarafı web uygulamalarının JavaScript'ten gelen çapraz kökenli istekleri nasıl ele aldığını ve hangi başlıkları yapmanız gerektiğini açıklar Yapabiliyorsanız, isteğin yapıldığı sunucu tarafından göndermeyi yapılandırabilirsiniz.

Bir istek ve yanıt almanız gereken bir sitenin Access-Control-Allow-Origin yanıt başlığını döndürmemesi durumunda, tarayıcılar her zaman olurlar, doğrudan müşteriniz tarafından kendisine yapılan çapraz Kökenli istekleri engelleyecektir JavaScript kodu çalışmaz. Ve eğer site sizin kontrol edeceğiniz bir site değilse ve davranışını yapılandırabiliyorsa, bu durumda çalışacak tek şey will, istekleri protesto etmektir - ya kendi proxy'niz aracılığıyla ya da açık bir proxy üzerinden.

Buradaki diğer yorumlarda belirtildiği gibi, isteklerinizde açık bir proxy'ye güvenmemek için iyi nedenler vardır. Bununla birlikte, ne yaptığınızı biliyorsanız ve açık bir vekilin ihtiyaçlarınız için işe yaradığına karar verirseniz, https://cors-anywhere.herokuapp.com/ güvenilir bir şekilde kullanılabilir, aktif olarak korunan ve çalışan https://github.com/Rob--W/cors-anywhere/ kodunun bir örneği.

Burada belirtilen diğer açık proxy'lerde olduğu gibi (en azından birkaç tanesi artık kullanılabilir durumda görünmüyor), çalıştığı yöntem, müşteri kodunuzun doğrudan bir istek göndermesini sağlamak, örneğin, http://foo.com adresine göndermektir. https://cors-anywhere.herokuapp.com/http://foo.com ve proxy, tarayıcının gördüğü yanıta gerekli Access-Control-* başlıklarını ekler.

7
sideshowbarker

Sorunu, Yahoo'nun sunucuları üzerinden proxy yapmak için YQL kullanarak sorunu atlayabilirsiniz. Sadece birkaç kod satırı:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

İşte bir açıklama ile link: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Eğer Entity Framework kullanıyorsanız, CORS özelliği etkinleştirilmiş olsa bile bu hatanın atılacağı görülüyor. Sorgunun tamamlanamaması nedeniyle hatanın oluştuğunu anladım. Bunun aynı durumda başkalarına da yardımcı olacağını umuyorum.

Aşağıdaki kod XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. hatasını atabilir:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Bunu düzeltmek için, sorgunun sonunda .ToList() veya .FirstOrDefault() gibi bir sonlandırma çağrısı gerekir, şöyle:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

Benim durumumda JEE7 JAX-RS uygulamasını kullanıyordum ve aşağıdaki püf noktaları benim için mükemmel sonuç verdi:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

Tarayıcıdan bu hata mesajını alırsanız:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

kontrolünüz dışındaki bir uzak sunucuya Ajax POST/GET isteği yapmaya çalışırken, lütfen bu basit düzeltmeyi unutmayın:

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

Gerçekten de, özellikle Ajax isteğini yapmak için JavaScript kullanıyorsanız, sorgunuzu alan ve uzak sunucuya gönderen bir iç proxy'dir.

İlk önce JavaScript kodunuzda, kendi sunucunuza Ajax araması yapın;

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Ardından, PHP verilerinizi sarmak ve proxy.php adlı basit bir POST dosyası oluşturun ve bunları uzak URL sunucusuna parametre olarak ekleyin. Expedia Otel arama API'sında bu sorunu nasıl atladığımı size örnek olarak vereceğim:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Yaparak:

echo json_encode(file_get_contents($url));

Sadece aynı sorguyu yapıyorsunuz, ancak sunucu tarafında ve bundan sonra, iyi çalışması gerekir.

Cevap kopyalandı ve yapıştırıldı NizarBsb

4
Flash

Htaccess kullanarak (yazı tipi için benim durumumda) başarılı bir şekilde çözebildim ama açık bir şekilde OP biraz farklı soruyor. Ancak FileMatch desenini kullanabilir ve cros hatası vermeyecek şekilde herhangi bir uzantı türü ekleyebilirsiniz.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

GoLang API'si için:

Öncelikle CORS'un ne olduğunu öğrenmek için MDN CORS Doc 'a bakabilirsiniz. Bildiğim kadarıyla CORS, İsteğin Kökeni'nin Sunucu Kaynağına erişmesine izin verip vermeyeceği ile ilgili.

Ayrıca, Origin sunucusunun Header adresinde Access-Control-Allow-Origin ayarını yaparak, hangi isteğin Origin'in sunucuya erişebileceğini kısıtlayabilirsiniz.

Örneğin, Sunucu Yanıtında aşağıdaki başlığın ayarlanması, yalnızca http://foo.example adresinden gönderilen isteğin sunucunuza erişebileceği anlamına gelir:

Access-Control-Allow-Origin: http://foo.example

ve aşağıdaki herhangi bir Menşe'den (veya etki alanından) gönderilen izin isteğini kabul eder:

Access-Control-Allow-Origin: *

Hata mesajında ​​bildiğim gibi, requested resource, sunucunun kaynağı anlamına gelir, bu nedenle No 'Access-Control-Allow-Origin' header is present on the requested resource., Sunucu Yanıtınıza Access-Control-Allow-Origin başlığını ayarlamadığınız anlamına gelir veya belki de ayarlarsınız ancak isteğin Kökeni Access-Control-Allow-Origin'da listelenmez; erişim:

İstenen kaynakta 'Erişim Kontrolü-İzin Verme-Başlangıcı' yok. Kökeni 'null' bu nedenle erişime izin verilmiyor.

GoLang'da, API sunucusunu gorilla/mux'da oluşturmak için localhost:9091 paketini kullanıyorum ve CORS'a yanıt başlığına "Access-Control-Allow-Origin", "*" ekleyerek izin veriyorum:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

Ve istemcide JavaScript kullanıyorum, localhost:9092 adresinde Chrome tarafından istek yapmak, Server localhost:9091 adresinden başarıyla "OKOK" alabilir.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Ayrıca istek/cevap başlığınızı Fiddler gibi araçlarla da kontrol edebilirsiniz.

4
yu yang Jian

Popüler soru - Bu kadarını okuduysanız ve başka hiçbir şey yardımcı olmadıysa bakmak için başka bir şey. Akamai, Limelight veya benzeri bir CDN'niz varsa, kaynağın URI'sine sahip olduğunuz önbellek anahtarını kontrol etmek isteyebilirsiniz. Origin başlık değerini içermiyorsa, başka bir Origin'den istendiğinde önbelleğe alınmış bir yanıtı iade ediyor olabilirsiniz. Yarım gününü bu hata ayıklama için harcadık. CDN yapılandırması, yalnızca bizim olan birkaç seçili alan için Origin değerini içerecek şekilde ayarlandı ve tüm diğerleri için null değerine ayarlandı. Bu işe yarıyor ve bilinen alanlarımızdan gelen tarayıcıların kaynaklarımızı görüntülemesini sağlıyor. Kuşkusuz, tüm diğer cevaplar buraya gelmek için ön şartlardır, ancak CDN tarayıcınızdan ilk atlama ise, bu gözden geçirilecek bir şeydir.

Bizim durumumuzda, hizmetimize yaptığımız bazı talepleri görebiliyoruz, ancak sitenin gönderdiği hacmi neredeyse değil. Bu bizi CDN'ye çekti. Geri dönüp orijinal isteğin bir tarayıcı AJAX çağrısının bir parçası değil doğrudan bir istek tarafından sunulduğunu ve erişim başlığının Access-Control-Allow-Origin yanıt başlığı içermediğini görebildik. Görünüşe göre CDN bu değeri önbelleğe aldı. Akamai CDN konfigürasyonu Tweak, Origin istek başlık değerini, eşleşmenin bir parçası olarak göz önünde bulundurarak, bizim için çalışmasını sağlamıştır.

4
Jared

Javascript'ten php api'ye kadar birçok kez bu başıma geliyor, çünkü birkaç nedenden biri. <?php header('Access-Control-Allow-Origin: *'); ? 'u koymayı unutma. Bu, alt etki alanı erişimi için faydalıdır. Diğer bir neden ise, jQuery ajax isteğinde belirli bir dataType belirtiyorum ve farklı bir dataType döndürüyorum, bu nedenle hata veriyor. 

Bu hatanın en son ve en belirgin nedeni, talep ettiğiniz sayfada ayrıştırma hatası olmasıdır. Tarayıcınızdaki bu URL'ye büyük olasılıkla fazla gelirseniz, bir ayrıştırma hatası görürsünüz ve sorunu gidermek için bir satır numarasına sahip olursunuz. 

Umarım bu birine yardımcı olur. Bu hata ayıklama her zaman biraz zaman aldı ve doğrulamak için bir kontrol listesi olsaydı.

3

Jsonp isteğinde "jsonpCallback" i yakalamalı ve geri göndermelisin.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Arka uç tarafında (arka uç PHP olarak kullanıyorsanız)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

Bu durumda, arka uç yanıtı gibi görünüyor 

jQuery331009526199802841284_1533646326884 ({ "ip": "192.168.1.1"})

ancak ön uçta el ile "jsonpCallback" ayarlayabilir ve onu arka uç tarafından

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Bu durumda, arka uç yanıtı gibi görünüyor 

get_ip ({ "ip": "192.168.1.1"})

2
Alexey Kolotsey

Web sitemde (.NET tabanlı) Bunu yeni ekledim:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Bu Video'ya teşekkürler.

2
FrenkyB

bunu arka uçta (Flask'ta), ön uçtan ziyade düzeltmek istemeniz durumunda, Flask CORS python paketini kesinlikle tavsiye ederim. Balon Kordonları

App.py'nizdeki basit bir satırla, herhangi bir Origin başlığına izin veren standardı otomatik olarak ekleyebilir veya istediğiniz gibi özelleştirebilirsiniz.

2
Ben Watts

Bütünlüğü sağlamak için, Apache , cors sağlar:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS sizin için.

CORS, "Çapraz Kökenli Kaynak Paylaşımı" dır ve etki alanları arası istek göndermenin bir yoludur. Artık XMLHttpRequest2 ve Fetch API'sinin ikisi de CORS'u destekliyor.

Ancak bunun sınırları var. Sunucunun Access-Control-Allow-Origin için özel bir istekte bulunması gerekiyor ve '*' olarak ayarlanamıyor.

Herhangi bir Origin'in size istek gönderebilmesini istiyorsanız, JSONP'ye ihtiyacınız var (ayrıca Access-Control-Allow-Origin ayarlamanız gerekir, ancak '*' olabilir).

Neyi seçeceğinizi bilmiyorsanız, çok sayıda istek yolu için, bunu yapmak için tamamen işlevsel bir bileşene ihtiyacınız olduğunu düşünüyorum. Basit bir bileşen tanıtmama izin verin catta


Modern bir tarayıcı kullanıyorsanız (> Internet Explorer9, Chrome, Firefox, Edge, vb.), Basit ama güzel bir bileşen kullanmanız önerilir, https://github.com/Joker-Jelly/catta. Bağımlılığı yoktur, 3 KB'den küçüktür ve aynı ölü basit sözdizimi ve seçenekleriyle Fetch, Ajax ve JSONP'yi destekler.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Ayrıca, ES6 modülü, CommonJS ve hatta HTML'deki <script> gibi projenize alma yolunu destekler.

2
Jelly

Bu yanıtların çoğu, kullanıcılara CORS üstbilgilerini kontrol ettikleri bir sunucuya nasıl ekleyeceklerini söyler.

Ancak, bir web sayfasında kontrol etmediğiniz bir sunucudan veriye ihtiyacınız varsa, çözümlerden biri sayfanızda bir komut dosyası etiketi oluşturmaktır, src niteliğini CORS başlıklarına sahip olmayan api uç noktasına ayarlayın, sonra bu verileri yükleyin sayfaya:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Bu çözüm kesinlikle sizin için çalışacak. Özel bir mesaj tanıtıcısı ekleyin:

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Webapiconfig.cs dosyasına kaydolun:

config.MessageHandlers.Add(new CustomHeaderHandler());

Eğer SignalR kullanıyorsanız, bu kodu globle.asax.cs dosyasına ekleyin:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var referrer = Request.UrlReferrer;
    if (Context.Request.Path.Contains("signalr/") && referrer != null)
    {
        Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
    }
}
2
Ujjwal

Bu hatayı, açısal olarak $http.get ile aldım. Bunun yerine$http.jsonpkullanmam gerekiyordu.

2
Travis Heeter

Belki bir litte bit karmaşık olabilir, ancak isteği yönlendirmek için bir web sunucusu kullanabilirsiniz . Ben js düğümü konusunda uzman değilim. Yani bu temiz kod olup olmadığını bilmiyorum. 

Ama bu benim için çalışıyor

İşte küçük bir örnek:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Eğer sunucunuz bir Spring Boot App ise, lütfen bu notu en üstündeki dinlenme kumandasına ekleyin - @CrossOrigin

Şimdi çalışması gerekiyor. Teşekkürler

1
Maiden

application_controller.rb içindeki Ruby on Rails sunucusu için şunu ekleyin:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

Hayır 'Erişim Kontrolü-İzin Verme-Kaynağı' başlığı istenen kaynakta mevcut. Kökeni ' https://sx.xyz.com ' bu nedenle erişime izin verilmiyor.

Ajax yanıtında Çapraz Etki Alanı Veri Değişimi ile de benzer bir sorunla karşı karşıya kaldım error undefined. Ancak başlıktaki cevap Durum Kodu: 200 Tamam oldu

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

Etrafı aşmanın çözümü: Benim durumumda, checkapikey () işlevini Ajax üzerinden başka bir alana çağırmak ve çağrının yapıldığı yerdeki verilerle yanıt almak oldu:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

Opera (Chrome ile aynı şekilde çalışır) için bu komutu kullanarak tarayıcıyı başlattım:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

Problem çözüldü! Şimdi yerel bir HTML dosyası üzerinde çalışabilirim (sabit disk sürücümde) ve aynı dosyadaki uzak kaynaklardan Ajax isteklerini çağırabilirim.

Not 1: Ana dizininizdeki herhangi bir klasörü --user-data-dir olarak verebilirsiniz.

Not 2:Debian 8 (Jessie)/Opera 39 ile test edildi

 Here is a screenshot

Normal olarak başladığınızda (yukarıdaki parametreler olmadan), aynı istek hata kodu bloğuna girer.

0
csonuryilmaz

Belki de kaynağı üretim sunucusundan development Sunucusuna kopyalayabilir ve dinamik olarak ayarlamak için kaynağın URL'sini alabilirsiniz. Bu şekilde, her zaman aynı Menşe'den okuyarak, Çapraz Menşe istisnasını ortadan kaldıracaksınız.

0
bachstein

Benim durumumda Spring Boot hizmetini kullanıyordum, sorumlu operasyonda çapraz Menşe notu kullanabilirsiniz:

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // Do something
} 
0
Chandan Kumar

Kendi etki alanımda, dış etki alanından içeriği alan ve gösteren basit bir köprü oluşturdum.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Şimdi, AJAX'ta harici alana erişmek yerine, bu köprü dosyasının URL'sini yerleştirdim.

Content-Type 'u ihtiyaçlarınıza göre ayarlamalısınız. Veriler JSON içindeyse, header("Content-Type: application/json"); işlevini kullanın.

0
Muhammad Saqib

Sadece "atlayarak" başka bir yoldan söz etmek - AJAX vekil. Verileri başka bir Kökenli'nden almak için sunucunuza istek gönderin ve isteği size geri gönderin.

Bu yaklaşımı JSONP'ye tercih ediyorum çünkü bazı potansiyel güvenlik sorunları var.

0
carobnodrvo

Bunu, web URL'sine erişen istemci URL’si için CORS’u etkinleştirerek çözdüm ve başarıyla çalıştı.

Örneğin:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali