JavaScript kodum geldiğinde Postacı neden “İstenen kaynakta 'Erişim-Denetim-İzin Verme Başlığı' başlığı yok” hatası almıyor?

Mod notu : Bu soru, Postacı'nın neden XMLHttpRequest ile aynı şekilde CORS kısıtlamalarına tabi olmadığına ilişkindir. Bu soru, "Hayır 'Access-Control-Allow-Origin' ..." hatasının nasıl düzeltileceği ile ilgili değildir .

Lütfen göndermeyi durdurun :

• Güneş altındaki her dil / çerçeve için CORS yapılandırmaları. Bunun yerine , ilgili dilinizin / çerçevenizin sorusunu bulun .
• CORS'i atlatma talebine izin veren 3. taraf hizmetleri
• Çeşitli tarayıcılar için CORS'yi kapatmak için komut satırı seçenekleri

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

XMLHttpRequest http: // myApiUrl / login yükleyemiyor . İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Bu nedenle 'null' kaynağına erişime izin verilmiyor.

API veya uzak kaynağın başlığı ayarlaması gerektiğini biliyorum, ancak Chrome uzantısı Postacı aracılığıyla istekte bulunduğumda neden işe yaradı ?

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

Eğer doğru anladıysam , sayfanızın açık olduğundan farklı bir alan adına XMLHttpRequest yapıyorsunuz . Bu nedenle tarayıcı, genellikle güvenlik nedenleriyle aynı kaynaktan bir istekte bulunmasına izin verdiği için engelliyor. Bir etki alanları arası istek yapmak istediğinizde farklı bir şey yapmanız gerekir. Bunu başarmak için bir öğretici CORS kullanmaktır .

Postacı kullandığınızda bu politika tarafından kısıtlanmazlar. Cross-Origin XMLHttpRequest tarafından alıntılanmıştır :

Normal web sayfaları, uzak sunuculardan veri göndermek ve almak için XMLHttpRequest nesnesini kullanabilir, ancak bunlar aynı başlangıç ​​politikasıyla sınırlıdır. Uzantılar çok sınırlı değil. Bir uzantı, ilk önce çapraz kaynak izinleri istediği sürece uzak sunucularla kendi kaynağı dışında konuşabilir.

UYARI: Kullanmak Access-Control-Allow-Origin: *API / web sitenizi siteler arası istek sahteciliği (CSRF) saldırılarına karşı savunmasız bırakabilir . Bu kodu kullanmadan önce riskleri anladığınızdan emin olun .

PHP kullanıyorsanız bunu çözmek çok kolaydır . PHP sayfanızın başına isteği işleyen şu komut dosyasını eklemeniz yeterlidir:

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

Eğer kullanıyorsanız Düğüm-kırmızı İzin vermek zorunda CORS içinde node-red/settings.jsaşağıdaki satırları un-yorum yaparak dosyaya:

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

Flask'ı soru ile aynı kullanıyorsanız ; ilk yüklemen varflask-cors

$ pip install -U flask-cors

Ardından uygulamanıza Flask cors ekleyin.

from flask_cors import CORS

Basit bir uygulama şöyle görünecektir:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Daha fazla ayrıntı için Flask belgelerine bakabilirsiniz .

Çünkü
$ .ajax ({type: "POST" - OPTIONS
$ .post'u çağırır ( - POST'u çağırır)

Her ikisi de farklı. Postacı "POST" ifadesini düzgün bir şekilde çağırır, ancak çağırdığımızda "SEÇENEKLER" olur.

C # web hizmetleri için - Web API'sı

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

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

Lütfen Ajax çağrısında herhangi bir 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");
    }
});

Not: Eğer içerik indirmek arıyorsanız bir üçüncü taraf web sitesinden daha 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");

CORS kısıtlaması uygulamak, sunucu tarafından tanımlanan ve tarayıcı tarafından uygulanan bir güvenlik özelliğidir .

Tarayıcı, sunucunun CORS politikasına bakar ve saygı duyar.

Ancak, Postacı aracı sunucunun CORS ilkesi hakkında rahatsız etmez.

Bu nedenle CORS hatası tarayıcıda görünür, ancak Postacı'da görünmez.

Aşağıdaki araştırmada API olarak, sorunuzdaki http: // myApiUrl / login yerine http://example.com kullanıyorum , çünkü bu ilk çalışma çalışıyor.

Sayfanızın http: //my-site.local: 8088 adresinde olduğunu varsayıyorum .

Farklı sonuçlar görmenizin nedeni Postacı:

• üstbilgiyi ayarla Host=example.com(API'nız)
• Başlık ayarlanmadı Origin

Bu, site ve API aynı etki alanına sahip olduğunda tarayıcıların istek gönderme yöntemine benzer (tarayıcılar da başlık öğesini ayarlar Referer=http://my-site.local:8088, ancak Postacı'da görmüyorum). Ne zaman Originbaşlık edilir değil set, genellikle sunucuları varsayılan olarak bu tür istekleri verir.

Postacı'nın istekleri göndermenin standart yolu budur. Ancak , siteniz ve API'nız farklı alan adlarına sahip olduğunda bir tarayıcı istekleri farklı şekilde gönderir ve ardından CORS oluşur ve tarayıcı otomatik olarak:

• üstbilgiyi ayarlar Host=example.com(sizinki API olarak)
• üstbilgiyi ayarlar Origin=http://my-site.local:8088(siteniz)

(Başlık Referer, ile aynı değere sahiptir Origin). Ve şimdi Chrome'un Konsol ve Ağlar sekmesinde şunları göreceksiniz:

Eğer varsa Host != Originbu genellikle, bu CORS olduğu ve sunucu böyle bir talebi algıladığında varsayılan olarak engelleme yapar .

Origin=nullHTML içeriğini yerel bir dizinden açtığınızda ayarlanır ve bir istek gönderir. Aynı durum, <iframe>aşağıdaki snippet'teki gibi bir istek gönderdiğinizde (ancak burada Hostbaşlık hiç ayarlanmamıştır) - genel olarak, HTML spesifikasyonunun opak kökenli olduğu her yerde bunu çevirebilirsiniz Origin=null. Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Basit bir CORS isteği kullanmazsanız, tarayıcı genellikle ana isteği göndermeden önce otomatik olarak bir SEÇENEK isteği gönderir - daha fazla bilgi burada . Aşağıdaki snippet bunu gösterir:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Sunucunuzun yapılandırmasını CORS isteklerine izin verecek şekilde değiştirebilirsiniz.

İşte nginx (nginx.conf dosyası) üzerinde CORS'yi açan bir örnek yapılandırma - always/"$http_origin"nginx ve "*"Apache için ayarlara çok dikkat edin - bu, CORS'nin herhangi bir alandan engellemesini kaldırır.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Apache'de (.htaccess dosyası) CORS'yi açan örnek bir yapılandırma

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Farklı kullanım durumlarında aynı hatayla karşılaşıldı.

Kullanım Durumu: Köşede Spring REST bitiş noktasını çağırmaya çalışıldığında kromda.

Çözüm: İlgili Controller Sınıfının üstüne @CrossOrigin ("*") ek açıklaması ekleyin .

Orta katmanınız olarak .NET kullanıyorsanız, route özelliğini açıkça kontrol edin, örneğin,

Böyle bir şey yaşadım,

[Route("something/{somethingLong: long}")] //Space.

Bununla düzeltildi,

[Route("something/{somethingLong:long}")] //No space

Yalnızca .NET Core Web API projesi için aşağıdaki değişiklikleri ekleyin:

1. Startup.cs dosyasının yöntemindeki services.AddMvc()satırdan sonra aşağıdaki kodu ekleyin ConfigureServices():

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Startup.cs dosyasının yöntemine app.UseMvc()satırdan sonra aşağıdaki kodu ekleyin Configure():

app.UseCors(options => options.AllowAnyOrigin());

3. Etki alanı dışında erişmek istediğiniz denetleyiciyi açın ve bu özelliği denetleyici düzeyinde ekleyin:

[EnableCors("AllowOrigin")]