javascript - headers - access-control-allow-origin php

El campo de encabezado de solicitud Access-Control-Allow-Headers no está permitido por Access-Control-Allow-Headers

Question

Estoy tratando de enviar archivos a mi servidor con una solicitud de publicación, pero cuando se envía provoca el error:

El campo de encabezado de solicitud Content-Type no está permitido por Access-Control-Allow-Headers.

Así que busqué en Google el error y agregué los encabezados:

$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"
}

Entonces me sale el error:

El campo de encabezado de solicitud Access-Control-Allow-Origin no está permitido por Access-Control-Allow-Headers

Así que busqué en Google y la única pregunta similar que pude encontrar fue una media respuesta y luego cerré como fuera de tema. ¿Qué encabezados se supone que debo agregar / eliminar?

Answer 1

El servidor (al que se envía la solicitud POST) debe incluir el Access-Control-Allow-Headers (etc.) en su respuesta . Ponerlos en su solicitud del cliente no tiene ningún efecto.

Esto se debe a que depende del servidor especificar que acepta solicitudes de origen cruzado (y que permite el encabezado de solicitud de Content-Type , etc.): el cliente no puede decidir por sí mismo que un servidor determinado debe permitir CORS.

Answer 2

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

Aquí hay una lista de encabezados típicos para incluir, incluido 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 su chico de servidor http necesita configurar para el servidor web al que está enviando sus solicitudes.

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

Reconocerá esto como una solicitud de Intercambio de recursos de origen cruzado (CORS) y debería comprender las implicaciones de hacer esas configuraciones de servidor.

Para más detalles ver:

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

Answer 3

En Asp Net Core , para que funcione rápidamente para el desarrollo; en Startup.cs , Configure method agregar

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

Answer 4

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

Estos parámetros DEBEN declararse 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");   
    }
}

Answer 5

Este es un problema de fondo. si usa Sails api en el backend, cambie cors.js y agregue su archivo 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''
};

Answer 6

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

Answer 7

Los encabezados que intenta establecer son encabezados de respuesta . Deben ser proporcionados, en la respuesta, por el servidor al que está haciendo la solicitud.

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

Answer 8

Puede activar el encabezado adecuado 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");

Answer 9

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

Answer 10

Si eso ayuda a alguien, (incluso si esto es un poco pobre, ya que solo debemos permitir esto para fines de desarrollo) aquí hay una solución Java ya que encontré el mismo problema. [Editar] No use el comodín * ya que es una mala solución, use localhost si realmente necesita que algo 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() {}

}

Answer 11

Si está probando algunas solicitudes de JavaScript para ionic2 o angularjs 2, en su Chrome para 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 eso, pero publicar y poner y eliminar necesitará que instale el complemento cors para que las pruebas funcionen sin problemas, eso definitivamente no es genial, pero no sé cómo lo hacen las personas sin el complemento CORS.

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

Answer 12

Yo tuve el mismo problema. En la documentación de jQuery encontré:

Para solicitudes de dominio cruzado, establecer el tipo de contenido en algo que no sea application/x-www-form-urlencoded , multipart/form-data , o text/plain activará el navegador para enviar una solicitud de OPCIONES de verificación previa al servidor.

Entonces, aunque el servidor permite solicitudes de origen cruzado pero no permite Access-Control-Allow-Headers , arrojará errores. Por defecto, el tipo de contenido angular es application/json , que intenta enviar una solicitud de OPCIÓN. Intente sobrescribir el encabezado angular predeterminado o permita 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''
    }
});

Answer 13

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers error Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers significa que el campo Access-Control-Allow-Origin del encabezado HTTP no se maneja ni permite por respuesta. Elimine el campo Access-Control-Allow-Origin del encabezado de la solicitud.