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

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ąć?

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.

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

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() {}

}

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:

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

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

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

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.

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

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

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

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

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

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

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.

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!