Pole nagłówka żądania Access-Control-Allow-Headers nie jest dozwolone przez Access-Control-Allow-Headers


224

Próbuję wysłać pliki na mój serwer z żądaniem postu, ale gdy je wysyła, powoduje błąd:

Żądanie pola nagłówka Content-Type nie jest dozwolone przez Access-Control-Allow-Headers.

Więc przejrzałem błąd i dodałem nagłówki:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

Wtedy pojawia się błąd:

Pole nagłówka żądania Access-Control-Allow-Origin nie jest dozwolone przez Access-Control-Allow-Headers

Więc przejrzałem to i jedynym podobnym pytaniem, jakie mogłem znaleźć, było udzielenie połowy odpowiedzi, a następnie zamknięte jako nie na temat. Jakie nagłówki mam dodać / usunąć?


Te nagłówki są wysyłane z serwera do przeglądarki, aby przeglądarka mogła zdecydować, czy JS może przeanalizować odpowiedź. Dodanie ich do żądania nie ma wartości.
pellyadolfo

Odpowiedzi:


189

Serwer (że żądanie POST jest wysyłany do) musi zawierać Access-Control-Allow-Headersnagłówek (ETC) w swojej odpowiedzi . Umieszczenie ich w żądaniu od klienta nie ma wpływu.

Wynika to z faktu, że to serwer musi określić, czy akceptuje żądania pochodzące z różnych źródeł (i że zezwala na Content-Typenagłówek żądania itd.) - klient nie może sam zdecydować, czy dany serwer powinien zezwalać na CORS.


5
Jak ustawić nagłówki w wewnętrznej bazie danych?
user3194367

11
@ user3194367: Zależy od twojego zaplecza.
Felix Kling

14
Chyba będę musiał porozmawiać z moim serwerem.
user3194367

2
response.addHeader („Access-Control-Allow-Headers”, „yourKey”);
Mayuresh,

2
@Mayuresh yourKey jest co? Content-Type?
zhuguowei

240

Miałem ten sam problem. W dokumentacji jQuery znalazłem:

Żądań między domenami, ustawienie typu zawartości do niczego innego niż application/x-www-form-urlencoded, multipart/form-datalub text/plainspowoduje, że przeglądarka Wyślij inspekcji wstępnych OPCJE żądania do serwera.

Tak więc, chociaż serwer zezwala na żądanie pochodzenia, ale nie zezwala Access-Control-Allow-Headers, będzie generować błędy. Domyślnie typem zawartości kątowej application/jsonjest próba wysłania żądania OPCJI. Spróbuj zastąpić domyślny nagłówek kątowy lub zezwolić Access-Control-Allow-Headersna serwerze. Oto próbka kątowa:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

28
To powinna być zaakceptowana odpowiedź, znacznie bardziej informacyjna niż druga!
Mike Szyndel

1
Chciałbym danych wieloczęściowych / formularzy, ponieważ chcę coś uplaod
Vlado Pandžić

3
or allow Access-Control-Allow-Headers in server endw jaki sposób?
Omar

1
@omar zależy od używanej platformy serwerowej. jeśli java jest przykład na inne odpowiedzi, jeśli php, to jest nazwa funkcji headerdo ustawienia nagłówka odpowiedzi
Fisherman

1
Wreszcie po dwóch dniach badań. Nie mam słów, żeby ci podziękować!
Mekey Salaria,

51

Jeśli to pomaga komukolwiek (nawet jeśli jest to trochę kiepskie, ponieważ musimy na to zezwalać tylko w celach programistycznych), oto rozwiązanie Java, ponieważ napotkałem ten sam problem. [Edytuj] Nie używaj symboli wieloznacznych *, ponieważ jest to złe rozwiązanie, użyj, localhostjeśli naprawdę potrzebujesz czegoś działającego lokalnie.

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

Jak wynika z wielu odpowiedzi na nagłówki żądania kontroli dostępu, istnieją wyraźne różnice wynikające z różnych środowisk. Dla mnie zadziałało uzyskanie dostępu do obiektu żądania i zrzucenie wartości dla nagłówków, a konkretnie wartości nagłówka dla „Access-Control-Request-Headers”. Następnie skopiuj / wklej to do swojego response.setHeader („Access-Control-Allow-Headers”, „{wklej tutaj}”); Korzystam również z języka Java, ale wymagałem dodatkowych wartości, a niektóre wymienione w tej odpowiedzi nie były mi potrzebne.
Software Prophets,

Było to częściowe (i, jak powiedziano, kiepskie) rozwiązanie, aby pomóc ludziom i podzielić się wskazówkami rok temu. Nie rozumiem sensu głosowania w dół, ale cóż, to jest twoja wolność. Chodzi o to, aby zezwolić na nagłówki po stronie serwera, aby po wysłaniu żądania OPTION klient / przeglądarka wiedziały, które nagłówki są dozwolone. Przyznaję, że jest trochę zamieszania, od tego czasu mój filtr CORS bardzo się zmienił. Jako lepszą praktykę, kontrola dostępu-Allow-Origin nigdy nie powinna być *; w mojej implementacji jest ustawiony przez właściwość.
lekant

Rozwiązanie zostało zredagowane w celu uwzględnienia najlepszych praktyk
lekant

16

Serwer (do którego wysyłane jest żądanie POST) musi zawierać nagłówek Content-Type w swojej odpowiedzi.

Oto lista typowych nagłówków, w tym jeden niestandardowy nagłówek „X_ACCESS_TOKEN”:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

Właśnie tego potrzebuje Twój serwer http dla serwera WWW, na który wysyłasz swoje żądania.

Możesz również poprosić swojego serwera o ujawnienie nagłówka „Content-Length”.

Rozpozna to jako żądanie CORS (Cross-Origin Resource Sharing) i powinien zrozumieć implikacje związane z konfiguracją tych serwerów.

Szczegółowe informacje:


13

Możesz aktywować odpowiedni nagłówek w PHP za pomocą tego:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

4
Opisz, w jaki sposób Twoja odpowiedź różni się od innych odpowiedzi. Samo opublikowanie kodu nie jest zbyt pomocne.
oscfri,

1
Jesteś gwiazdą rocka, reszta odpowiedzi zagłębia się w stronę techniczną. Twój rozwiązuje mój problem, określając metody, które również powinny być dozwolone!
Daniel ZA

1
@DanielZA, chociaż rozumiem, co rozumiesz przez „inne odpowiedzi zagłębiają się w stronę techniczną”, ponieważ chcesz po prostu uruchomić kod, SO ma zagłębiać się w techniczną stronę rzeczy, ponieważ powinieneś wiedzieć, dlaczego rzeczy działają nie tylko jak sprawić, by wtedy działało. Nie wychwytuj tego zachowania, komentując rozwiązania ...
nicolasassi,

8

Następujące działa dla mnie z nodejs:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

ma znaczenie kolejność metod kontroli dostępu-Allow?
vini

@vini, myślę, że to nie ma znaczenia.
Kodowanie Ninja

4

Nagłówki, które próbujesz ustawić, są nagłówkami odpowiedzi . Muszą być dostarczone w odpowiedzi przez serwer, do którego kierujesz zapytanie.

Nie ma dla nich miejsca. Nie byłoby sensu dysponować środkami do przyznawania uprawnień, gdyby mogły być one udzielone przez witrynę, która chciała pozwolenia, zamiast witryny, która była właścicielem danych.


Jak ustawić nagłówki w wewnętrznej bazie danych?
user3194367

@ user3194367 - To zależy od twojego backendu. Nie wiem na jaki serwer HTTP lub język programowania przesyłasz żądanie.
Quentin

Chyba będę musiał porozmawiać z moim serwerem.
user3194367

3

Jeśli ktoś napotka ten problem z serwerem ekspresowym, dodaj następujące oprogramowanie pośrednie

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

3

jeśli testujesz niektóre żądania javascript dla ionic2 lub angularjs 2, w swoim chrome na PC lub Mac, upewnij się, że zainstalowałeś wtyczkę CORS dla przeglądarki chrome, aby umożliwić krzyżowanie.

Żądania mayba get będą działać bez potrzeby, ale wysyłanie i wysyłanie i usuwanie będzie wymagało zainstalowania wtyczki cors do testowania, aby przejść bez problemów, co zdecydowanie nie jest fajne, ale nie wiem, jak ludzie to robią bez wtyczki CORS.

i upewnij się również, że odpowiedź json nie zwraca wartości 400 według statusu json


3

to jest problem zaplecza. jeśli używasz interfejsu API żagle na backend zmień cors.js i dodaj tutaj swoje pole

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

3

W Asp Net Core , aby szybko uruchomić go do programowania; w Startup.cs, Configure methoddodaj

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

2

W moim przypadku otrzymuję kilka parametrów jako @HeaderParam do metody usługi internetowej.

Te parametry MUSZĄ zostać zadeklarowane w filtrze CORS w ten sposób:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

2

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headersbłąd oznacza, że Access-Control-Allow-Originpole nagłówka HTTP nie jest obsługiwane lub dozwolone przez odpowiedź. Usuń Access-Control-Allow-Originpole z nagłówka żądania.


2

Jeśli używasz localhosti PHP ustawia to w celu rozwiązania problemu:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

Z własnego interfejsu:

{headers: {"Content-Type": "application/json"}}

i boom już nie ma problemów localhost!

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.