0

Tengo el backend: con C# y Visual estudio Comunity 2017, versión 15.2 y el frontend: Angular 8

No logro encontrar la falla CORS (mismo backend con AngularJS funciona el CORS),

El error comienza con: (debajo esta completo)

localhost/:1 Access to XMLHttpRequest at 'http://localhost:56711/MedInfo.svc/menu' from origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

El código de Angular8 es muy simple:

  baseURL="http://localhost:56711/MedInfo.svc";
  getMenu () {
    alert("getMenu" + this.baseURL);
    return this.http.get(this.baseURL+ '/menu',{
        headers: {
          'method': 'GET'
          ,'Accept': 'application/json'
          ,'withCredentials': 'true'
         ,'Access-Control-Allow-Origin':'*'

        }
      }
      );


  }

según entiendo por https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

1) instalo Microsoft.AspNet.WebApi.Cors

2) habilito cors en WebApiConfig.cs

 namespace RESTWSApp   {
    public static class WebApiConfig   {
        public static void Register(HttpConfiguration config) {
            config.MapHttpAttributeRoutes();

            //var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*"); NO anda
            var cors = new EnableCorsAttribute("*", "*", "*"); //origin, headers, methods
            config.EnableCors(cors);


            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

3) definir política en la clase, en mi caso defino una interface y despues la clase según:

namespace RESTWSApp {
  [ServiceContract]
  public interface IMedInfo  {

    [OperationContract (Name="Menu")]
    [WebGet(UriTemplate = "/menu", ResponseFormat = WebMessageFormat.Json)]
    MenuItemCollection Menu();
    .....
   }    

luego en la clase:

namespace RESTWSApp  {
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class MedInfo : IMedInfo {

  public MenuItemCollection Menu()    {
       return FUNCAdmin.DevolverMenu(DevolverGrupo());

    }
}
}

Pero después de todo esto sigue CORS me bloquea con el error:

localhost/:1 Access to XMLHttpRequest at 'http://localhost:56711/MedInfo.svc/menu' from origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

coremain.component.ts:114 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:56711/MedInfo.svc/menu", ok: false, …}
zone-evergreen.js:2952 GET http://localhost:56711/MedInfo.svc/menu net::ERR_FAILED

No tengo claro que falta, les agradeceré alguna sugerencia que me oriente hacia donde debo encontrar la solución.

Gracias por leer hasta aquí.

1 respuesta 1

0

1) Fijate esta pregunta para entender como funciona CORS: Falta la cabecera CORS 'Access-Control-Allow-Origin'

2) En tu código tenes algunas cosas que están mal y las explicaciones las podés encontrar leyendo la pregunta del item 1.

En Angular

return this.http.get(this.baseURL+ '/menu',{
        headers: {
          'method': 'GET' 
          ,'Accept': 'application/json'
          ,'withCredentials': 'true'
         ,'Access-Control-Allow-Origin':'*'
        }
  }
);

method: GET no se agrega, como estás usando get() se agrega sola esa cabecera.

'Access-Control-Allow-Origin':'*' Esta cabecera no se manda en el request desde Angular, se debe recibir desde servidor.

,'withCredentials': 'true' desde angular esta cabecera se agrega como option.

La misma instrucción modificada debería quedar como:

return this.http.get(this.baseURL+ '/menu',{
            headers: {
              'Accept': 'application/json'
            },
            withCredentials: true
      }
);

Nota: tal vez tengas un motivo para hacerlo así, pero normalmente si recibis un json, el this.http.get() suele llevar el tipo de dato que recibis de vuelta. El caso más genérico sería this.http.get<any>()

Del otro lado:

//var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*"); NO anda
var cors = new EnableCorsAttribute("*", "*", "*"); //origin, headers, methods

El código que está descomentado tiene un "*", en lugar del origen. Esto es un valor válido solo si no se mandan credenciales. Como en Angular estás mandando credenciales, esta opción es inválida.

La configuración que está comentada sí es compatible con with credentials siempre y cuando la cabecera origin del request coincida con "http://localhost:4200".

Es decir que entre las dos opciones si una puede funcionar es:

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");

Hasta acá lo que pude ver y que tiene que ver con la configuración, independientemente del leguaje.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.