Como Habilitar CORS

Si alguna vez has creado una aplicación web con javascript bien sea usando Angular o Vuejs donde debías consumir un API Rest que se encuentra en un servidor diferente a donde esta tu aplicación web, seguramente necesitaste habilitar CORS.

En mi caso esto me genero muchos problemas con los navegadores ya que al parecer no todos manejan los Headers de la misma forma.

Habilitar CORS

Lo que debes hacer es agregar un par de headers en los request que hagas desde tu aplicación web.

Para este caso practico usaré vuejs junto con axios como cliente http para hacer llamado al API Rest.

Deberas agregar la siguiente configuración

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';  
axios.defaults.headers.common['Access-Control-Allow-Methods'] = '*'  

Nota

De lado de tu API también deberas habilitar CORS, por ejemplo en Rails deberas hacer dos cosas

Incluir la gema gem rack-cors y luego agregar el siguiente código dentro de config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do  
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end  

Problemas

Si en el navegador te aparece el siguiente error
Request header field Authorization is not allowed by Access-Control-Allow-Headers Deberas especificar en el Access-Control-Allow-Headers los posibles headers que debe aceptar.

axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,authorization';  

En las pruebas que realice al parecer solo google chrome permite usar el wildcard * como valor del paramtero Access-Control-Allow-Headers el resto de navegadores me genero el erro anterior, por lo cual fue necesario especificar cada uno de los posibles headers permitidos.

Y algo mas...

Por lo general tu aplicación web será servida por un servidor http como puede ser Nginx, en este también deberás agregar la configuración de CORS solamente tendrás que agregar las siguientes lineas en el archivo nginx.conf

location / {  
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' '*';
    add_header 'Access-Control-Allow-Headers' 'access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,authorization';
  }

Ten en cuenta que si necesitas consumir un API que esta detrás de un servidor http, en este también deberas tener CORS habilitado.

Jose Aponte

Desarrollador full-stack apasionado por las tecnologías de información y los lenguajes de programación. Me gustan divertirme con mi familia, mi lema es "Nunca paras de Aprender"

Bogota

Subscribe to Jappsku Engineering Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!