Dlaczego listonosz nie otrzymuje błędu „Brak żądanego źródła kontroli dostępu do źródła” w żądanym zasobie ”, gdy robi to mój kod JavaScript?

Uwaga dotycząca modów : To pytanie dotyczy tego, dlaczego Postman nie podlega ograniczeniom CORS w taki sam sposób, jak XMLHttpRequest. To pytanie nie dotyczy sposobu naprawienia błędu „Brak kontroli dostępu - zezwolenia na pochodzenie”….

Przestań publikować :

• Konfiguracje CORS dla każdego języka / struktury pod słońcem. Zamiast tego znajdź pytanie dotyczące odpowiedniego języka / frameworka .
• Usługi stron trzecich, które umożliwiają żądanie obejścia CORS
• Opcje wiersza poleceń do wyłączania CORS dla różnych przeglądarek

Próbuję zrobić autoryzację za pomocą JavaScript , łącząc się z relaksującego API wbudowane w kolbie . Jednak po złożeniu żądania pojawia się następujący błąd:

XMLHttpRequest nie może załadować http: // myApiUrl / login . Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. Dostęp „null” pochodzenia nie jest zatem dozwolony.

Wiem, że interfejs API lub zdalny zasób musi ustawić nagłówek, ale dlaczego zadziałało, gdy wysłałem żądanie za pośrednictwem rozszerzenia Postman do przeglądarki Chrome ?

To jest kod żądania:

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

Jeśli dobrze to zrozumiałem, wykonujesz XMLHttpRequest w innej domenie niż Twoja strona. Dlatego przeglądarka go blokuje, ponieważ zwykle ze względów bezpieczeństwa zezwala na żądanie tego samego źródła. Musisz zrobić coś innego, jeśli chcesz wykonać żądanie między domenami. Samouczek na temat tego, jak to osiągnąć, to Korzystanie z CORS .

Gdy korzystasz z listonosza, nie podlegają one tym zasadom. Cytat z Cross-Origin XMLHttpRequest :

Zwykłe strony internetowe mogą używać obiektu XMLHttpRequest do wysyłania i odbierania danych ze zdalnych serwerów, ale są one ograniczone tą samą zasadą pochodzenia. Rozszerzenia nie są tak ograniczone. Rozszerzenie może komunikować się ze zdalnymi serwerami spoza swojego źródła, pod warunkiem, że najpierw poprosi o uprawnienia krzyżowe.

OSTRZEŻENIE: Używanie Access-Control-Allow-Origin: *może narazić interfejs API / witrynę na ataki typu CSRF. Przed użyciem tego kodu upewnij się, że rozumiesz ryzyko .

Rozwiązanie tego problemu jest bardzo proste, jeśli używasz PHP . Wystarczy dodać następujący skrypt na początku strony PHP, która obsługuje żądanie:

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

Jeśli używasz Node-red , musisz zezwolić na CORS w node-red/settings.jspliku , odznaczając następujące linie:

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

Jeśli używasz Flask tak samo jak pytanie; musisz najpierw zainstalowaćflask-cors

$ pip install -U flask-cors

Następnie dołącz aplikację Flask cors do swojej aplikacji.

from flask_cors import CORS

Prosta aplikacja będzie wyglądać następująco:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

Aby uzyskać więcej informacji, możesz sprawdzić dokumentację Flask .

Ponieważ
$ .ajax ({type: „POST” - wywołuje OPCJE
$ .post ( - wywołuje POST

Oba są różne. Listonosz poprawnie nazywa „POST”, ale kiedy go nazwiemy, będzie to „OPCJE”.

W przypadku usług internetowych C # - Web API

Dodaj następujący kod do pliku web.config pod znacznikiem <system.webServer>. To zadziała:

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

Upewnij się, że nie popełnisz błędu w wywołaniu Ajax

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

Uwaga: jeśli szukasz pobierania treści ze strony internetowej innej firmy, to ci to nie pomoże . Możesz wypróbować następujący kod, ale nie JavaScript.

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

Stosowanie ograniczenia CORS jest funkcją bezpieczeństwa zdefiniowaną przez serwer i wdrożoną przez przeglądarkę .

Przeglądarka przegląda zasady CORS serwera i je przestrzega.

Jednak narzędzie Postman nie przejmuje się polityką CORS serwera.

Dlatego błąd CORS pojawia się w przeglądarce, ale nie w Listonoszu.

W poniższym dochodzeniu jako API używam http://example.com zamiast http: // myApiUrl / login z twojego pytania, ponieważ to pierwsze działa.

Zakładam, że twoja strona jest na http: //my-site.local: 8088 .

Powodem, dla którego widzisz różne wyniki, jest to, że Listonosz:

• ustaw nagłówek Host=example.com(twój API)
• NIE ustawiam nagłówka Origin

Jest to podobne do sposobu wysyłania żądań przez przeglądarkę, gdy witryna i interfejs API mają tę samą domenę (przeglądarki również ustawiają element nagłówka Referer=http://my-site.local:8088, ale nie widzę go w Listonoszu). Gdy Originnagłówek nie jest ustawiony, zazwyczaj serwery domyślnie dopuszczają takie żądania.

Jest to standardowy sposób, w jaki Listonosz wysyła żądania. Ale przeglądarka wysyła żądania inaczej, gdy witryna i interfejs API mają różne domeny , a następnie występuje CORS i przeglądarka automatycznie:

• ustawia nagłówek Host=example.com(twój jako API)
• ustawia nagłówek Origin=http://my-site.local:8088(twoja strona)

(Nagłówek Refererma taką samą wartość jak Origin). A teraz na karcie Konsola i sieci Chrome zobaczysz:

Gdy masz Host != Originto CORS, a gdy serwer wykryje takie żądanie, zwykle domyślnie je blokuje .

Origin=nulljest ustawiany po otwarciu treści HTML z katalogu lokalnego i wysyła żądanie. Ta sama sytuacja ma miejsce, gdy wysyłasz żądanie wewnątrz <iframe>, jak w poniższym fragmencie (ale tutaj Hostnagłówek wcale nie jest ustawiony) - ogólnie rzecz biorąc, wszędzie tam, gdzie specyfikacja HTML mówi nieprzejrzyste pochodzenie, możesz to przetłumaczyć Origin=null. Więcej informacji na ten temat można znaleźć tutaj .

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

Look on chrome-console > network tab

Jeśli nie korzystasz z prostego żądania CORS, zazwyczaj przeglądarka automatycznie wysyła również żądanie OPTIONS przed wysłaniem żądania głównego - więcej informacji tutaj . Poniższy fragment pokazuje to:

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)

Możesz zmienić konfigurację swojego serwera, aby zezwolić na żądania CORS.

Oto przykładowa konfiguracja, która włącza CORS na nginx (plik nginx.conf) - bądź bardzo ostrożny z ustawieniami always/"$http_origin"dla nginx i "*"Apache - spowoduje to odblokowanie CORS z dowolnej domeny.

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

Oto przykładowa konfiguracja, która włącza CORS na Apache (plik .htaccess)

# ------------------------------------------------------------------------------
# | 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"

Wystąpił ten sam błąd w innym przypadku użycia.

Przypadek użycia: w chromie, gdy próbowano wywołać punkt końcowy REST sprężyny pod kątem.

Rozwiązanie: Dodaj adnotację @CrossOrigin („*”) nad odpowiednią klasą kontrolera.

Jeśli używasz platformy .NET jako warstwy środkowej, sprawdź wyraźnie atrybut route, na przykład

Miałem problem, kiedy tak było,

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

Naprawiono to przez,

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

Tylko dla projektu .NET Core Web API dodaj następujące zmiany:

1. Dodaj następujący kod po services.AddMvc()wierszu w ConfigureServices()metodzie pliku Startup.cs:

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

2. Dodaj następujący kod po app.UseMvc()wierszu w Configure()metodzie pliku Startup.cs:

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

3. Otwórz kontroler, do którego chcesz uzyskać dostęp poza domeną, i dodaj ten atrybut na poziomie kontrolera:

[EnableCors("AllowOrigin")]