¿Cómo modifico el código del servidor de mi API web para agregar un encabezado de Access-Control-Allow-Origin ‘?

Tengo una aplicación de API web y puedo llamar a sus métodos REST con un formulario de formularios de Windows; También quiero llamarlos desde una utilidad HTML / jQuery, e intenté hacerlo siguiendo este tutorial .

Y encuentro información que indica que necesito agregar de alguna manera una directiva en el lado del servidor que permita este tipo de llamada, como a partir de aquí

… pero no sé exactamente qué necesito agregar, y dónde, para que esto funcione.

El mensaje específico que recibo en la consola del navegador (en Chrome) es:

XMLHttpRequest cannot load http://localhost:28642/api/VendorItems/GetAll. No 'Access- Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:54161' is therefore not allowed access. 

También traté de reemplazar la llamada “localhost” con el nombre de mi máquina y con mi dirección IP, pero todos llevan al mismo mensaje de error.

En cualquier caso, es algo extraño y estoy un poco asustado de poder llamar a esos métodos desde una aplicación de Windows Forms sin ningún problema, pero desde un navegador: ¡whammo!

ACTUALIZAR

Intenté hacer lo primero necesario en el enlace provisto en el comentario, intentando instalar el paquete Cors en mi aplicación de API / servidor web, y falló:

 PM> Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService Install-Package : No compatible project(s) found in the active solution. At line:1 char:1 + Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidOperation: (:) [Install-Package], InvalidOperationException + FullyQualifiedErrorId : NuGetNoCompatibleProjects,NuGet.PowerShell.Commands.InstallPackageCommand PM> 

… y buscando paquetes en línea en la GUI de NuGet para “Microsoft.AspNet.WebApi.Cors” da como resultado “No se encontraron elementos”.

Desde aquí , veo que hay formas simples con ASP.NET MVC / Web API.

Para ASP.NET Web API

 using System; using System.Web.Http.Filters; public class AllowCrossSiteJsonAttribute : ActionFilterAttribute { public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) { if (actionExecutedContext.Response != null) actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*"); base.OnActionExecuted(actionExecutedContext); } } 

Entonces, ahora ha definido lo que AllowCrossSiteJson un AllowCrossSiteJson filtro de acción AllowCrossSiteJson . El rest es solo una cuestión de agregar el atributo de filtro de acción a los controladores o métodos de su elección.

Etiqueta un controlador API completo:

 [AllowCrossSiteJson] public class ValuesController : ApiController { 

O llamadas API individuales:

 [AllowCrossSiteJson] public IEnumerable Get() { ... } 

También puede restringir la implementación de CORS a su selección de sitios de confianza. Simplemente debe cambiar el "*" a "http://your-domain.com,http://your-domain-2.com" etc. Tenga en cuenta la separación de coma y la inclusión del protocolo (http: // o https: //) en la especificación de origen. Si está proporcionando localhost, asegúrese de que el número de puerto esté incluido.

¡Espero que ayude! 🙂