Odpowiedź na żądanie inspekcji wstępnej nie przechodzi kontroli dostępu

Mój "serwer API" jest aplikacją PHP więc aby rozwiązać ten problem znalazłem poniższe rozwiązanie do pracy:

Umieść linie w indeksie .php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

W AspNetCore Web api ten problem został naprawiony przez dodanie "Microsoft.AspNetCore.Cors " (ver 1.1.1) i dodanie poniższych zmian przy starcie.cs.

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

I

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

I umieszczenie [EnableCors("AllowAllHeaders")] na kontrolerze.

Są pewne zastrzeżenia, jeśli chodzi o Kors. Po pierwsze, nie pozwala na wildcards *, ale nie trzymaj mnie na tym, czytałem go gdzieś i nie mogę teraz znaleźć artykułu.

Jeśli składasz żądania z innej domeny, musisz dodać nagłówki Zezwalaj na pochodzenie.

 Access-Control-Allow-Origin: www.other.com 

Jeśli składasz żądania, które wpływają na zasoby serwera, takie jak POST / PUT / PATCH, i jeśli typ mime jest inny niż następujący application/x-www-form-urlencoded, multipart/form-data, lub text/plain przeglądarka automatycznie zrobi opcja przed lotem wymaga sprawdzenia z serwerem, czy na to pozwala.

Więc twój API / serwer musi odpowiednio obsłużyć te żądania opcji, musisz odpowiedzieć odpowiednim access control headers, a kod statusu odpowiedzi http musi być 200.

Nagłówki powinny być coś takiego, dostosuj je do swoich potrzeb:

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

Nagłówek max-age jest ważny, w moim przypadku nie działałby bez niego, chyba przeglądarka potrzebuje informacji na jak długo " dostęp prawa " są ważne.

Dodatkowo, jeśli wykonujesz np. POST żądanie z application/json mime z innej domeny, musisz również dodać wcześniej wspomniany nagłówek allow origin, aby wyglądał tak:

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

Kiedy pre-lot powiedzie się i zdobędzie wszystkie potrzebne informacje, twoje rzeczywiste żądanie zostanie złożone.

Ogólnie rzecz biorąc, jakiekolwiek nagłówki Access-Control są wymagane w zapytaniu wstępnym lub przed lotem, powinny być podane w odpowiedzi, aby praca.

Jest dobry przykład w dokumentach MDN tutaj na ten link , i powinieneś również sprawdzić to tak post

JavaScript XMLHttpRequesti Fetch postępują zgodnie z Polityką tego samego pochodzenia. Więc, aplikacja internetowa korzystająca z XMLHttpRequest lub Fetch może tworzyć tylko HTTP żądania do własnej domeny.

Źródło: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Musisz wysłać Access-Control-Allow-Origin: * nagłówek HTTP ze strony serwera.

Jeśli używasz Apache jako serwera HTTP, możesz go dodać do pliku konfiguracyjnego Apache ' a w ten sposób:

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

Mod_headers jest domyślnie włączona w Apache, jednak możesz się upewnić, że jest włączona, uruchamiając:

 a2enmod headers

Jeśli piszesz Chrome-extension

Musisz dodać w manifest.json uprawnienia dla swojej domeny.

"permissions": [
   "http://example.com/*",
   "https://example.com/*",
   "http://www.example.com/*",
   "https://www.example.com/*"
]

Aby rozwiązać problemy z cross-origin-requests w aplikacji Node JS:

npm i cors

I po prostu Dodaj wiersze poniżej do app.js

let cors = require('cors')
app.use(cors())

Jeśli korzystasz z serwera IIS przez przypadek. możesz ustawić poniżej nagłówki w opcji nagłówki żądań HTTP.

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

Z tym wszystkim postem, get itp., będzie działać dobrze.

W PHP możesz dodać nagłówki:

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

Dla serwera flask w Pythonie, możesz użyć wtyczki flask-cors, aby włączyć żądania między domenami.

Zobacz: https://flask-cors.readthedocs.io/en/latest/

Nasz zespół czasami widzi to za pomocą Vue, axios i C # WebApi. Dodanie atrybutu trasy na punkcie końcowym, w którym próbujesz trafić, naprawia to dla nas.

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

W moim pliku konfiguracyjnym Apache VirtualHost dodałem następujące linie:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Dla tych, którzy używają Lambda zintegrowany Proxy z bramką API. Musisz skonfigurować swoją funkcję lambda tak, jakbyś przesyłał swoje żądania bezpośrednio do niej, co oznacza, że funkcja powinna poprawnie skonfigurować nagłówki odpowiedzi. (Jeśli używasz niestandardowych funkcji lambda, będzie to obsługiwane przez bramę API.)

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}

Myślę, że Wyłączenie CORSA z Chrome nie jest dobrym sposobem , ponieważ jeśli używasz go w ionic, na pewno w Mobile Build problem ponownie się podniesie.

Więc lepiej naprawić w backendzie.

Przede wszystkim w nagłówku należy ustawić-

W tym przypadku nie jest to możliwe.]} W związku z tym, że nie jest to możliwe, nie jest to możliwe, ponieważ nie jest to możliwe.]}

I jeśli API zachowuje się jak GET I POST to również ustawić w nagłówku -

If ($_SERVER ['REQUEST_METHOD'] = = 'OPTIONS') {if (isset ($_SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) header ("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset ($_SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) header ("Access-Control-Allow-Headers:
{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); exit (0);}

Bardzo częstą przyczyną tego błędu może być to, że API hosta zmapowało żądanie do metody http (np. PUT), a Klient API wywołuje API za pomocą innej metody http (np. POST lub GET)

Dla każdego, kto korzysta z API HTTP Gateway i trasy proxy ANY / {proxy+}

Będziesz musiał jawnie zdefiniować swoje metody trasy, aby CORS działał.

Szkoda, że nie było to bardziej wyraźne w AWS Docs do konfigurowania CORS dla HTTP API

Był na 2 godziny rozmowy z AWS wsparcia i Zapętlony w jednym z ich starszych programistów HTTP API, który wydał tę rekomendację.

Mam nadzieję, że ten post zaoszczędzi trochę czasu i wysiłek dla tych, którzy pracują z API Gateway HTTP API.

Miałem do czynienia z tym problemem, gdy serwer DNS został ustawiony na 8.8.8.8 (google). Właściwie problem był w routerze, moja aplikacja próbowała połączyć się z serwerem przez google, a nie lokalnie (w moim konkretnym przypadku). Usunąłem 8.8.8.8 i to rozwiązało problem. Wiem, że to problemy rozwiązane przez ustawienia CORS, ale może ktoś będzie miał taki sam problem jak ja

Używam AWS sdk do przesyłania plików, po spędzeniu trochę czasu na szukaniu w Internecie natknąłem się na ten wątek. podziękowania dla @ lsimoneau 45581857 okazało się, że działo się dokładnie to samo. Po prostu skierowałem mój adres URL żądania do regionu na moim wiadrze, dołączając opcję region i zadziałało.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

Niezależne dystrybucje GeoServer obejmują serwer aplikacji Jetty. Włącz udostępnianie zasobów między źródłami (CORS) aby umożliwić korzystanie z GeoServer aplikacjom JavaScript spoza własnej domeny.

Odkomentuj następujące <filter> i <filter-mapping> z webapps / geoserver/WEB-INF / web.xml:

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

Łatwo rozwiązać ten problem tylko kilkoma krokami, bez martwienia się o nic. Uprzejmie postępuj zgodnie z instrukcjami, aby go rozwiązać .

1. open ( https://www.npmjs.com/package/cors#enabling-cors-pre-flight )
2. Przejdź do instalacji i skopiuj polecenie npm install cors, aby zainstalować przez terminal węzła
3. Przejdź do prostego użycia (Włącz wszystkie żądania CORS) przez przewinięcie.następnie skopiuj i wklej kompletne zgłoszenie w projekcie ur i uruchom go...to na pewno zadziała.. Kopiuj kod komentarza i wklej w aplikacji ur.js lub jakikolwiek inny projekt i spróbuj ..to zadziała.pozwoli to odblokować każdy surowiec cross origin sharing..so możemy przełączać między serwami do Twojego użytku

Korzystając z opcji Cors w bramie API, użyłem następujących ustawień pokazanych powyżej

Zauważ również, że twoja funkcja musi zwrócić status HTTP 200 W odpowiedzi na żądanie opcji, w przeciwnym razie CORS również zawiedzie.

Coś, co jest bardzo łatwe do przeoczenia...

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy API-project. W oknie właściwości ustaw 'uwierzytelnianie anonimowe' na Włączone !!!

Wyłącz zabezpieczenia chrome.Tworzenie skrótu chrome kliknij prawym przyciskiem myszy - > properties - > target, wklej to "C:\Program Files (x86) \ Google \ Chrome \ Application\chrome.exe " -- disable-web-security --user-data-dir="c:/chromedev"