1# CORS (Cross-Origin Resource Sharing) { #cors-cross-origin-resource-sharing }23[CORS o "Cross-Origin Resource Sharing"](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) se refiere a situaciones en las que un frontend que se ejecuta en un navegador tiene código JavaScript que se comunica con un backend, y el backend está en un "origen" diferente al frontend.45## Origen { #origin }67Un origen es la combinación de protocolo (`http`, `https`), dominio (`myapp.com`, `localhost`, `localhost.tiangolo.com`) y puerto (`80`, `443`, `8080`).89Así que, todos estos son orígenes diferentes:1011* `http://localhost`12* `https://localhost`13* `http://localhost:8080`1415Aunque todos están en `localhost`, usan protocolos o puertos diferentes, por lo tanto, son "orígenes" diferentes.1617## Pasos { #steps }1819Entonces, digamos que tienes un frontend corriendo en tu navegador en `http://localhost:8080`, y su JavaScript está tratando de comunicarse con un backend corriendo en `http://localhost` (porque no especificamos un puerto, el navegador asumirá el puerto por defecto `80`).2021Entonces, el navegador enviará un request HTTP `OPTIONS` al backend `:80`, y si el backend envía los headers apropiados autorizando la comunicación desde este origen diferente (`http://localhost:8080`), entonces el navegador `:8080` permitirá que el JavaScript en el frontend envíe su request al backend `:80`.2223Para lograr esto, el backend `:80` debe tener una lista de "orígenes permitidos".2425En este caso, la lista tendría que incluir `http://localhost:8080` para que el frontend `:8080` funcione correctamente.2627## Comodines { #wildcards }2829También es posible declarar la lista como `"*"` (un "comodín") para decir que todos están permitidos.3031Pero eso solo permitirá ciertos tipos de comunicación, excluyendo todo lo que implique credenciales: Cookies, headers de autorización como los utilizados con Bearer Tokens, etc.3233Así que, para que todo funcione correctamente, es mejor especificar explícitamente los orígenes permitidos.3435## Usa `CORSMiddleware` { #use-corsmiddleware }3637Puedes configurarlo en tu aplicación **FastAPI** usando el `CORSMiddleware`.3839* Importa `CORSMiddleware`.40* Crea una lista de orígenes permitidos (como strings).41* Agrégalo como un "middleware" a tu aplicación **FastAPI**.4243También puedes especificar si tu backend permite:4445* Credenciales (headers de autorización, cookies, etc).46* Métodos HTTP específicos (`POST`, `PUT`) o todos ellos con el comodín `"*"`.47* Headers HTTP específicos o todos ellos con el comodín `"*"`.4849{* ../../docs_src/cors/tutorial001_py310.py hl[2,6:11,13:19] *}505152Los parámetros predeterminados utilizados por la implementación de `CORSMiddleware` son restrictivos por defecto, por lo que necesitarás habilitar explícitamente orígenes, métodos o headers particulares para que los navegadores estén permitidos de usarlos en un contexto de Cross-Domain.5354Se admiten los siguientes argumentos:5556* `allow_origins` - Una lista de orígenes que deberían estar permitidos para hacer requests cross-origin. Por ejemplo, `['https://example.org', 'https://www.example.org']`. Puedes usar `['*']` para permitir cualquier origen.57* `allow_origin_regex` - Una cadena regex para coincidir con orígenes que deberían estar permitidos para hacer requests cross-origin. por ejemplo, `'https://.*\.example\.org'`.58* `allow_methods` - Una lista de métodos HTTP que deberían estar permitidos para requests cross-origin. Por defecto es `['GET']`. Puedes usar `['*']` para permitir todos los métodos estándar.59* `allow_headers` - Una lista de headers de request HTTP que deberían estar soportados para requests cross-origin. Por defecto es `[]`. Puedes usar `['*']` para permitir todos los headers. Los headers `Accept`, `Accept-Language`, `Content-Language` y `Content-Type` siempre están permitidos para [requests CORS simples](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests).60* `allow_credentials` - Indica que las cookies deberían estar soportadas para requests cross-origin. Por defecto es `False`.6162    Ninguno de `allow_origins`, `allow_methods` y `allow_headers` puede establecerse a `['*']` si `allow_credentials` está configurado a `True`. Todos deben ser [especificados explícitamente](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#credentialed_requests_and_wildcards).6364* `expose_headers` - Indica cualquier header de response que debería ser accesible para el navegador. Por defecto es `[]`.65* `max_age` - Establece un tiempo máximo en segundos para que los navegadores almacenen en caché los responses CORS. Por defecto es `600`.6667El middleware responde a dos tipos particulares de request HTTP...6869### Requests de preflight CORS { #cors-preflight-requests }7071Estos son cualquier request `OPTIONS` con headers `Origin` y `Access-Control-Request-Method`.7273En este caso, el middleware interceptará el request entrante y responderá con los headers CORS adecuados, y un response `200` o `400` con fines informativos.7475### Requests simples { #simple-requests }7677Cualquier request con un header `Origin`. En este caso, el middleware pasará el request a través de lo normal, pero incluirá los headers CORS adecuados en el response.7879## Más info { #more-info }8081Para más información sobre <abbr title="Cross-Origin Resource Sharing">CORS</abbr>, revisa la [documentación de CORS de Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).8283/// note | Detalles Técnicos8485También podrías usar `from starlette.middleware.cors import CORSMiddleware`.8687**FastAPI** proporciona varios middlewares en `fastapi.middleware` como una conveniencia para ti, el desarrollador. Pero la mayoría de los middlewares disponibles provienen directamente de Starlette.8889///