Access-Control-Allow-Headers no está permitido por Access-Control-Allow-Headers

Yo tenía el mismo problema. En la documentación de jQuery encontré:

Para las solicitudes entre dominios, establecer el tipo de contenido a cualquier otra cosa que no sea application/x-www-form-urlencoded, multipart/form-data, o text/plain activará el navegador para enviar una solicitud de OPCIONES de comprobación previa al servidor.

Así que aunque el servidor permite la petición de origen cruzado pero no permite Access-Control-Allow-Headers, arrojará errores. Por defecto angular content type es application/json, que está tratando de enviar una solicitud de OPCIÓN. Intenta sobrescribir angular cabecera predeterminada o permitir Access-Control-Allow-Headers en el extremo del servidor. Aquí hay una muestra angular:

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

Si eso ayuda a alguien, incluso este tipo de pobres, ya que solo debemos permitir esto para fines de desarrollo, aquí hay una solución Java, ya que me encontré con el mismo problema. [Editar] No use el comodín * ya que es una mala solución, use localhost si realmente necesita tener algo que funcione localmente.

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

}

El servidor (al que se envía la solicitud POST) necesita incluir el encabezado Content-Type en su respuesta.

Aquí hay una lista de encabezados típicos para incluir, incluyendo un encabezado personalizado "X_ACCESS_TOKEN":

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

Eso es lo que tu chico del servidor http necesita configurar para el servidor web al que estás enviando tus solicitudes.

También puede pedirle a su servidor que exponga el encabezado "Content-Length".

Reconocerá esto como un Origen Cruzado Compartir recursos (CORS) solicitar y debe entender las implicaciones de hacer esas configuraciones de servidor.

Para más detalles ver:

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

Lo siguiente funciona para mí con 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();
});

Los encabezados que está intentando establecer son los encabezados response. Tienen que ser proporcionados, en la respuesta, por el servidor al que está haciendo la solicitud.

No tienen lugar en el cliente. Sería inútil tener un medio para otorgar permisos si pudieran ser otorgados por el sitio que quería permiso en lugar del sitio que poseía los datos.

Si alguien experimenta este problema con un servidor express, agregue el siguiente middleware

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

Este es un problema de backend. si usa la api de sails en el backend, cambie cors.js y añadir su archivado aquí

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

Si está probando algunas solicitudes de javascript para ionic2 o angularjs 2 , en su chrome en pc o mac , asegúrese de instalar el complemento CORS para el navegador chrome para permitir el origen cruzado .

Mayba obtener solicitudes funcionará sin necesidad de que , pero post y puts y eliminar tendrá que instalar cors plugin para las pruebas para ir sin problemas , que definitivamente no es genial , pero no sé cómo la gente lo hace sin CORS plugin .

Y también asegúrese de que la respuesta json no devolviendo 400 por algún estado json

En mi caso, estoy recibiendo varios parámetros como @HeaderParam en un método de servicio web.

Estos parámetros DEBEN ser declarados en su filtro CORS de esa manera:

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

Puede activar el encabezado apropiado en PHP con esto:

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 error significa que el campo Access-Control-Allow-Origin del encabezado HTTP no es manejado o permitido por la respuesta. Elimine el campo Access-Control-Allow-Origin del encabezado de la solicitud.