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

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

Dla żądań między domenami, Ustawianie typu zawartości na cokolwiek innego niż application/x-www-form-urlencoded, multipart/form-data, lub text/plain spowoduje wysłanie przez przeglądarkę żądania opcji inspekcji wstępnej na serwer.

Więc chociaż serwer zezwala na cross origin request, ale nie pozwala Access-Control-Allow-Headers, wyrzuci błędy. Domyślnie typem zawartości kątowej jest application/json, który próbuje wysłać żądanie opcji. Spróbuj nadpisać angular default header or allow Access-Control-Allow-Headers in server end. Oto przykład kątowy:

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

Jeśli to komuś pomoże, nawet tak ubogim, ponieważ musimy pozwolić na to tylko w celach programistycznych, oto rozwiązanie Java, ponieważ napotkałem ten sam problem. [Edytuj] nie używaj dzikiej karty * ponieważ jest to złe rozwiązanie, użyj localhost, jeśli naprawdę potrzebujesz mieć coś, co działa 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 do włączenia, 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"

To jest to, co twój serwer http facet musi skonfigurować dla serwera www, na który wysyłasz swoje żądania.

Możesz również poprosić swojego gościa z serwera o ujawnienie nagłówka "Content-Length".

Po szczegóły patrz:

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

Dla mnie z nodejsem działa:

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ć, to Nagłówki response . Muszą one zostać dostarczone w odpowiedzi przez serwer, do którego składasz żądanie.

Nie mają miejsca na klienta. Bezcelowe byłoby posiadanie środków do przyznawania uprawnień, gdyby mogły zostać przyznane przez stronę, która chciała pozwolenia zamiast strony, która posiadała dane.

Jeśli ktoś doświadczy tego problemu z serwerem express, dodaj następujące middleware

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

To jest problem z backendem. jeśli używasz Sails api na backendzie Zmień cors.js i dodaj swój wpis tutaj

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

Jeśli testowanie niektórych żądań javascript dla ionic2 lub angularjs 2, w chrome na pc lub mac, a następnie należy zainstalować wtyczkę CORS dla przeglądarki chrome, aby umożliwić cross origin .

Mayba dostać wnioski będą działać bez potrzeby, że, ale post i puts I delete będzie trzeba zainstalować Cors plugin do testowania, aby przejść bez problemów, że definitley nie fajne, ale nie wiem, jak ludzie to robią bez CORS plugin .

A także upewnij się, że odpowiedź json nie jest zwracanie 400 przez jakiś status json

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

Te parametry muszą być 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");   
    }
}

Możesz aktywować właściwy 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");

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