falta - Angular2 al problema REST WebApi CORS

falta la cabecera cors access control allow origin angular 4

Question

Estoy usando un extremo delantero angular2 y un backend WebApi. El webapi es CORS habilitado

var cors = new EnableCorsAttribute("*", "*", "*");
GlobalConfiguration.Configuration.EnableCors(cors);

y funciona, porque tengo diferentes sitios (jQuery / Javascript) que usan esta api. Pero con angular2 no lo hace. Recibo el siguiente mensaje:

La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado.

Tal vez es algo relacionado con la "solicitud de verificación previa"?

Answer 1

¿Tiene alguna opción configurada en su archivo web.config para cors? es decir, algo como <add name="Access-Control-Allow-Origin" value="*"/>

Si es así, asegúrate de eliminar eso, y controla los cors a través del código solamente.

La respuesta here te ayudará.

Answer 2

Estoy trabajando con Angular 2 para el front-end y nodeJS (Expressjs) para la API

Angular 2 está trabajando bajo localhost: 3000 y Express está trabajando en localhost: 8000

El problema ocurre cuando localhost: 3000 intenta llamar a una URL con el método POST ... El servidor de ExpressJS rechaza la llamada porque proviene de otro servidor (o puerto)

Para resolver el problema, debe indicar al nodo js que acepte llamadas del servidor localhost: 3000 ...

Puede encontrar una biblioteca (CORS) para evitar este problema en este enlace :

Answer 3

Para propósitos de desarrollo, agregue this extensión de Chrome y habilite el intercambio de recursos de origen cruzado

Answer 4

Puedes agregar un complemento en tu navegador Firefox. Funcionará en tu navegador Firefox como encanto. Cors Everywhere solucionó mi problema. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

Answer 5

Sé que la pregunta no es pedir código PHP. Llegué aquí por todo esto antes del vuelo y Angular2. Cuando miré la respuesta de Matteo, me di cuenta de por qué la solicitud a mi servidor regresa con 401. Esto se debe a que en el navegador de verificación previa no se envía el token de autorización y, por lo tanto, el servidor regresa con 401 y el navegador cree que CORS no está permitido . Tenga en cuenta que el código a continuación solo debe usarse en el servidor de desarrollo a menos que sepa lo que está haciendo.

En PHP puedes hacer esto:

if (strtolower($_SERVER[''REQUEST_METHOD'']) === ''options'') {
         header(''Access-Control-Allow-Origin: '' . $_SERVER[''HTTP_ORIGIN'']);
         header(''Access-Control-Allow-Methods: POST, GET, OPTIONS'');
         header(''Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Range, Content-Disposition, Content-Type, Authorization'');
         header(''Access-Control-Allow-Credentials: true'');
         echo ''Allowed'';
         exit;
}

O Nginx

if ($request_method = ''OPTIONS'') {
        add_header ''Access-Control-Allow-Origin'' ''*'';
        add_header ''Access-Control-Allow-Methods'' ''GET, POST, OPTIONS'';
        #
        # Custom headers and headers various browsers *should* be OK with but aren''t
        #
        add_header ''Access-Control-Allow-Headers'' ''DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header ''Access-Control-Max-Age'' 1728000;
        add_header ''Content-Type'' ''text/plain charset=UTF-8'';
        add_header ''Content-Length'' 0;
        return 204;
     }

Recuerde que cualquier otro encabezado que esté enviando al servidor debe agregarse a la lista de Access-Control-Allow-Headers.

Answer 6

Su mensaje de error le dice que no hay Access-Control-Allow-Origin en la respuesta de su llamada. Es algo necesario para habilitar CORS para esta solicitud. No es algo relacionado con Angular2.

Esto se activa en el lado del cliente mediante la adición del encabezado de Origin en la solicitud. ¿Tiene este encabezado en su solicitud? ¿Usas solicitudes pre-iluminadas en tus otras aplicaciones? Como recordatorio:

• Peticiones simples Este caso de uso se aplica si usamos los métodos HTTP GET, HEAD y POST. En el caso de los métodos POST, solo se admiten los tipos de contenido con los siguientes valores: text/plain , application/x-www-form-urlencoded y multipart/form-data .
• Solicitudes pre-iluminadas . Cuando el caso de uso de "solicitudes simples" no se aplica, se realiza una primera solicitud (con el método OPCIONES HTTP) para verificar qué se puede hacer en el contexto de las solicitudes de dominios cruzados.

Quizás las solicitudes de OPCIONES no se manejan correctamente en el lado del servidor (no devuelva los encabezados correctos, ...).

Lo que estaría interesado es indicarnos en qué solicitudes se produce el error: las OPCIONES una o la solicitud de destino. Puedes echar un vistazo a la pestaña de Red en DevTools ...

Vea estos enlaces para obtener más detalles sobre cómo funciona CORS:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

Espero te ayude, Thierry

Answer 7

También tuve dificultades con cors y angular 6.

cuando una solicitud al servidor no es una solicitud básica, hay una solicitud de verificación previa que le pregunta a su servidor si puede responder a su solicitud.

El servidor que responde a esa solicitud debe tener esos encabezados:

Access-Control-Allow-Origin // debe ser su dominio

Access-Control-Allow-Headers // debe ser Aceptar, Origen, cualquier otro encabezado que pueda tener.

Access-Control-Allow-Method // cualquier método que use

esos son el "*", "*", "*" que agregó como Atributos de Cors para aceptar todo, pero eso solo funcionó para mí en modo dev cuando el cliente y el servidor estaban en la misma máquina. después de pasar a la producción con el servidor IIS, esos valores ya no funcionaban, especialmente debido a los encabezados.

así que es realmente fácil de arreglar y también funciona para IOS * * * agregué esto a cada controlador:

[EnableCors(origins: "enter your domain here", headers: "authorization, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers", methods: "GET,POST", PreflightMaxAge = 600 // optional, SupportsCredentials = true // optional)]

Puede leer más en el artículo que me ayudó a entender lo que tenía que hacer: https://msdn.microsoft.com/en-us/magazine/dn532203.aspx

Espero que te ayude, Tomer.

Answer 8

Tuve el mismo problema en mi aplicación Angular2. El problema, como ya se mencionó, es que antes de cada solicitud realizada por el cliente se envía una solicitud de verificación previa al servidor.

Este tipo de solicitud tiene un tipo de OPCIONES , y el servidor debe devolver una respuesta de verificación previa con el estado 200 y los encabezados configurados para aceptar solicitudes de ese cliente.

Esta es mi solución (con expreso):

// Domain you wish to allow
res.setHeader(''Access-Control-Allow-Origin'', ''http://localhost:3000'');

// Request methods you wish to allow
res.setHeader(''Access-Control-Allow-Methods'', ''GET, POST, PUT, DELETE'');

// Request headers you wish to allow
res.setHeader(''Access-Control-Allow-Headers'', ''YOUR-CUSTOM-HEADERS-HERE'');

// Set to true if you need the website to include cookies in  requests
res.setHeader(''Access-Control-Allow-Credentials'', true);

// Check if preflight request
if (req.method === ''OPTIONS'') {
    res.status(200);
    res.end();
}
else {
    // Pass to next layer of middleware
    next();
}

Como puede ver, establezco los encabezados y luego los recupero si el tipo de solicitud es OPCIONES . En ese caso, devuelvo un estado 200 y finalizo la respuesta.

De esta manera, el cliente será autorizado y también podrá configurar sus encabezados personalizados en todas las solicitudes.