Cómo permitir interna MVC Web Api desde un sitio externo fuera de la red

Tengo una API web de MVC (alojada en IIS) que está en la carpeta wwwroot y accesible localmente dentro de la red. Puedo ejecutar llamadas de API como esta: http://mylocalapi:133/api/Values/Get y obtengo un resultado .

Tengo un sitio externo que es http://example.org y me gustaría ejecutar el mismo http://mylocalapi:133/api/Values/Get .

Tanto el sitio externo como el sitio API interno están alojados en el mismo servidor (pero puede ser diferente, por ejemplo, un proveedor externo fuera de la red).

Tengo CORS configurado en mi API de esta manera:

[EnableCors(origins: "http://example.org", headers: "*", methods: "*")]

Pero sigo recibiendo el siguiente error:

XMLHttpRequest cannot load http://mylocalapi:133. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.org' is therefore not allowed access.

Así que APICALLS , creé un directorio virtual ( APICALLS ) en mi sitio externo y creé un archivo web.config que apuntará al sitio IIS local:

       

Cuando hago eso, trato de acceder a la API de esta manera: http://example.org/APICALLS/api/Values/Get pero me aparece el siguiente error:

 XMLHttpRequest cannot load http://mylocalapi:133. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.org' is therefore not allowed access. 

¿Qué estoy haciendo mal y cómo puedo resolver el problema?

No puede acceder a un sitio solo interno desde JavaScript, ya que JavaScript se ejecuta en el lado del cliente, en el equipo del usuario final, fuera de su red interna. La única forma de acceder a la API a través de JavaScript es: 1) exponer la API a la red externa o 2) crear un proxy en su sitio externo.

El proxy sería básicamente una acción o acciones que ofrecen acceso externo, y luego traducir las llamadas a su API interna. En el más simple, podría tener una sola acción que básicamente responde a algo como:

 https://foo.com/api?endpoint=/internal/api/endpoint/&someParam=foo 

La acción tomaría esta información en la cadena de consulta y la usaría para realizar una solicitud a su API interna a través de algo como HttpClient . Sin embargo, este enfoque expone prácticamente toda la API interna, por lo que es mejor que lo mueva afuera en ese punto. El mejor enfoque sería crear puntos finales específicos (métodos de acción) para llamadas API internas específicas que necesita realizar a través de JavaScript.

ACTUALIZAR

Es difícil darle una dirección real aquí sin contexto. Digamos que hay un punto final API interno que devuelve una lista de widgets y desea recuperar esta lista de widgets a través de AJAX. Necesitarías algo como:

 public async Task GetWidgets() { // fetch widgets from internal API via HttpClient return Json(widgets, JsonRequestBehavior.AllowGet); } 

Entonces, su AJAX llamaría a la URL de este método de acción en su sitio web, que bajo el capó llama a la API interna.

Agregue el código siguiente en su clase WebApiConfig en el método Register

 config.EnableCors();