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

Otrzymuję ten błąd, używając ngResource do wywołania interfejsu API REST w Amazon Web Services:

XMLHttpRequest nie może załadować http://server.apiurl.com:8000/s/login?login=facebook . Odpowiedź na żądanie inspekcji wstępnej nie przechodzi kontroli kontroli dostępu: Żądany zasób nie zawiera nagłówka „Kontrola dostępu - Zezwalaj na pochodzenie”. Dlatego źródło „ http: // localhost ” nie ma dostępu. Błąd 405

Usługa:

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

Kontroler:

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

Używam Chrome i nie wiem, co jeszcze zrobić, aby rozwiązać ten problem. Skonfigurowałem nawet serwer, aby akceptował nagłówki z miejsca pochodzenia localhost.

Występują problemy z CORS.

Istnieje kilka sposobów rozwiązania tego problemu.

1. Wyłącz CORS. Na przykład: jak wyłączyć corsy w chromie
2. Użyj wtyczki do przeglądarki
3. Użyj proxy, takiego jak nginx. przykład konfiguracji
4. Przejdź przez niezbędną konfigurację swojego serwera. Jest to raczej czynnik serwera sieciowego załadowanego do instancji EC2 (zakładając, że to właśnie rozumiesz przez „serwis internetowy Amazon”). W przypadku konkretnego serwera możesz odwołać się do strony internetowej umożliwiającej włączenie CORS.

Mówiąc dokładniej, próbujesz uzyskać dostęp do api.serverurl.com z localhost. To jest dokładna definicja żądania między domenami.

Wyłączając go tylko po to, aby wykonać swoją pracę (OK, zapewnij słabe bezpieczeństwo, jeśli odwiedzasz inne witryny i po prostu rzucisz puszkę w dół drogi), możesz użyć serwera proxy, który sprawia, że ​​przeglądarka myśli, że wszystkie żądania pochodzą od lokalnego hosta, gdy naprawdę masz serwer lokalny, który następnie wywołuje serwer zdalny.

więc api.serverurl.com może stać się localhost: 8000 / api, a lokalny nginx lub inny serwer proxy wyśle ​​do właściwego miejsca docelowego.

Teraz popularne zapotrzebowanie, 100% więcej informacji o CORS .... ten sam wspaniały smak!

A dla downvoters ... omijanie CORS jest dokładnie tym, co pokazano dla tych, którzy po prostu uczą się interfejsu. https://codecraft.tv/courses/angular/http/http-with-promises/

Mój „Serwer API” to aplikacja PHP, więc aby rozwiązać ten problem, znalazłem poniższe rozwiązanie do pracy:

Umieść linie w index.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 interfejsie internetowym AspNetCore ten problem został rozwiązany przez dodanie „Microsoft.AspNetCore.Cors” (wer. 1.1.1) i dodanie poniższych zmian w Startup.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 wprowadzenie [EnableCors("AllowAllHeaders")]kontrolera.

Istnieją pewne zastrzeżenia, jeśli chodzi o CORS. Po pierwsze, nie pozwala na używanie symboli wieloznacznych, *ale nie trzymaj mnie tego, gdzieś go przeczytałem i nie mogę teraz znaleźć artykułu.

Jeśli wysyłasz żądania z innej domeny, musisz dodać nagłówki zezwolenia na początek.

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

Jeśli dokonujesz wnioski, które wpływają na zasoby serwera jak POST / PUT / patch, a jeśli MIME typu jest inny niż poniżej application/x-www-form-urlencoded, multipart/form-datalub text/plainprzeglądarka będzie automatycznie dokonać OPCJE przed lotem zażądać, aby skontaktować się z serwerem, jeśli byłoby to pozwolić .

Tak więc Twój interfejs API / serwer musi odpowiednio obsłużyć żądania OPCJI, musisz odpowiedzieć access control headersodpowiednim kodem stanu odpowiedzi HTTP 200.

Nagłówki powinny wyglądać mniej więcej tak: 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 maksymalnego wieku jest ważny, w moim przypadku nie działałby bez niego, myślę, że przeglądarka potrzebuje informacji o tym, jak długo ważne są „prawa dostępu”.

Ponadto, jeśli składasz np. POSTŻądanie za pomocą application/jsonmima z innej domeny, musisz również dodać wspomniany wcześniej nagłówek zezwolenia na początek, aby wyglądało to 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

Gdy lot przed lotem zakończy się powodzeniem i otrzyma wszystkie potrzebne informacje, zostanie wysłane aktualne żądanie.

Ogólnie rzecz biorąc, Access-Controlw odpowiedzi należy podać wszelkie nagłówki w żądaniu początkowym lub przed lotem, aby zadziałało.

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

JavaScript XMLHttpRequest i Fetch są zgodne z zasadami tego samego pochodzenia. Tak więc aplikacja internetowa korzystająca z XMLHttpRequest lub Fetch mogła wysyłać żądania HTTP tylko do własnej domeny.

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

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

Jeśli używasz Apache jako serwera HTTP, możesz dodać go do pliku konfiguracyjnego Apache w następujący sposób:

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

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

 a2enmod headers

Jeśli piszesz rozszerzenie chrome

Musisz dodać manifest.jsonuprawnienia do swojej domeny (domen).

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

Jeśli używasz serwera IIS przez przypadek. możesz ustawić poniżej nagłówków w opcji nagłówków żą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 przypadku serwera kolby python można użyć wtyczki flask-cors, aby włączyć żądania między domenami.

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

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: *");
...

Aby rozwiązać problemy z żądaniami krzyżowania pochodzenia w aplikacji Node JS:

npm i cors

I po prostu dodaj poniższe linie do app.js

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

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 Integrated Proxy z API Gateway . Musisz skonfigurować swoją funkcję lambda tak, jakbyś przesyłał do niej swoje żądania bezpośrednio, co oznacza, że ​​funkcja powinna poprawnie skonfigurować nagłówki odpowiedzi. (Jeśli korzystasz z 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 CORS z Chrome nie jest dobrym sposobem , ponieważ jeśli używasz go w trybie jonowym, z pewnością w Mobile Build problem znów się pojawi.

Więc lepiej naprawić w swoim backend.

Po pierwsze W nagłówku należy ustawić-

• nagłówek („Access-Control-Allow-Origin: *”);
• nagłówek („Zestaw nagłówków Kontrola dostępu - Zezwól na nagłówki:„ Pochodzenie, zapytanie o X, typ zawartości, akceptacja ””);

A jeśli API zachowuje się zarówno jako GET, jak i POST, ustaw także w nagłówku

if ($ _SERVER ['REQUEST_METHOD'] == 'OPCJE') {if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) nagłówek („Metody kontroli dostępu - Allow: GET, POST, OPCJE”);
if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) nagłówek ("Access-Control-Allow-Headers:
{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); wyjście (0); }

Bardzo częstą przyczyną tego błędu może być to, że interfejs API hosta zamapował żądanie na metodę http (np. PUT), a klient API wywołuje interfejs API przy użyciu innej metody http (np. POST lub GET)

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

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

Napotkałem ten problem, gdy serwer DNS był ustawiony na 8.8.8.8 (Google). W rzeczywistości problem tkwił w routerze, moja aplikacja próbowała połączyć się z serwerem za pośrednictwem 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ł takie same problemy jak ja

Używam AWS SDK do przesyłania, po spędzeniu czasu na wyszukiwaniu w Internecie natknąłem się na ten wątek. dzięki @lsimoneau 45581857 okazuje się, że działo się dokładnie to samo. Po prostu skierowałem swój adres URL żądania do regionu na moim wiadrze, dołączając opcję regionu i zadziałało.

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

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

Odkomentuj następujące <filter>i <filter-mapping>od 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 jest rozwiązać ten problem zaledwie kilkoma krokami, nie martwiąc się o nic. Prosimy postępować zgodnie z instrukcjami, aby go rozwiązać.

1. otwarte ( 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) przewijając. następnie skopiuj i wklej całą deklinację w swoim projekcie i uruchom ją ... to na pewno zadziała .. skopiuj kod komentarza i wklej w pliku ur.j.j lub innym projekt i spróbuj ... to zadziała. to odblokuje każde współdzielenie zasobów pochodzących z różnych źródeł .. więc możemy przełączać się między serwisami do użytku

Coś, co bardzo łatwo przeoczyć ...

W eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt api. W oknie właściwości ustaw „Anonimowe uwierzytelnianie” na Włączone !!!

Wyłącz chromowane zabezpieczenie. Utwórz chromowane kliknięcie prawym przyciskiem myszy -> właściwości -> cel, wklej to „C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe” - wyłącz-web-bezpieczeństwo - użytkownik -data-dir = "c: / chromedev"