O que é CORS e como resolver os principais erros | TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 05 Min 20 Seg Tempo restante da oferta: 14 05 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é CORS e como resolver os principais erros [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) # O que é CORS e como resolver os principais erros Nesse artigo vamos entender o que é CORS, quais os principais erros relacionados com ele, suas principais causas e como resolve-los corretamente. [ Gabriel Machado ](https://www.treinaweb.com.br/blog/autor/gabriel-machado) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/13172051/CORS.png) O CORS (Cross-origin Resource Sharing) é um mecanismo utilizado pelos navegadores para compartilhar recursos entre diferentes origens. O CORS é uma [especificação do W3C](https://www.w3.org/TR/cors/) e faz uso de [headers do HTTP](https://www.treinaweb.com.br/blog/o-que-e-http-request-get-post-response-200-404/) para informar aos navegadores se determinado recurso pode ser ou não acessado. Para compreender melhor, imagine que você está desenvolvendo uma aplicação web que consiste em uma [SPA](https://www.treinaweb.com.br/blog/o-que-sao-aplicacoes-spa/) e uma [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api/). Tudo ocorre sem problemas no seu ambiente local, mas ao fazer o deploy em produção você se depara com isso: ![Erro de CORS](https://dkrn4sk0rn31v.cloudfront.net/2020/04/12181347/erro_cors.jpg) Isso acontece devido a um mecanismo de segurança presentes nos navegadores chamado de [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). Ele é usado para limitar como um documento ou script de uma origem pode interagir com recursos de outra origem. [ ![Ruby on Rails Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ruby-on-rails.svg) Curso Ruby on Rails Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/ruby-on-rails-avancado) Entenda como origem a combinação entre o protocolo (http ou https), o host (painel.treinaweb.com.br) e a porta (80 ou 443, podendo ser omitida) de um determinado endereço (`http://painel.treinaweb.com.br/`). Se a origem de duas URLs forem idênticas, a interação entre esses recursos pode acontecer sem problema. Por exemplo, considere a seguinte URL: `http://painel.treinaweb.com.br/perfil/`. Alguns exemplos de URLs com same-origin considerando a origem são `http://painel.treinaweb.com.br/` e `http://painel.treinaweb.com.br/cursos/`. Nesses casos a única alteração está no path, com o início da URL igual. Agora, as seguintes URLs seriam bloqueadas: `https://painel.treinaweb.com.br/perfil/`, `http://painel.treinaweb.com.br:81/perfil/index.html`, `http://www.treinaweb.com.br/`. No primeiro caso, o protocolo é diferente (https), no segundo caso temos outra porta e, por fim, o subdomínio do host é diferente. Em todos esses casos você está sujeito a uma requisição controlada por CORS: ![Conceitos de CORS](https://dkrn4sk0rn31v.cloudfront.net/2020/04/12181348/CORS_principle.png) ## Possíveis erros de CORS Como a utilização e compartilhamento de recursos de origens diferentes é algo bastante comum na internet, nem tudo que o navegador precisa carregar está sujeito ao same-origin policy. Sua página está sujeita a algum tipo de problema de CORS em requisições como: - [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) ou [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) do Javascript; - Web fonts, utilizando a funcionalidade de [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) do CSS; - [WebGL textures](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL); - [CSS Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) - Imagens em [canvas desenhados com drawImage()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) Os casos mais comuns são com as requisições javascript que utilizam XMLHttpRequest ou Fetch APIs. Para esses casos vamos entender como o CORS funciona e como podemos solucionar corretamente esse problema. [ ![Webpack - Empacotando aplicações](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/webpack.svg) Curso Webpack - Empacotando aplicações Conhecer o curso ](https://www.treinaweb.com.br/curso/webpack-empacotando-aplicacoes) ## Ciclo de uma requisição com CORS Ao enviar uma requisição para uma origem diferente, o navegador utiliza de um header específico enviado pelo servidor chamado `Access-Control-Allow-Origin`. A partir desse e mais alguns headers o navegador determina se aquele recurso será carregado ou não. Em alguns tipos de requisições, é necessário enviar uma requisição preliminar chamada de preflighted request. O preflighted request utiliza o método OPTIONS do HTTP informando o método e domínio que será invocado para assim garantir que a requisição seguinte pode ser realizada. Temos abaixo um diagrama que mostra como funciona uma requisição que precisa enviar uma chamada de preflight: ![Fluxo de preflight request](https://dkrn4sk0rn31v.cloudfront.net/2020/04/12181348/preflight_correct.png) ## Como resolver problemas de CORS Quando encontramos um erro de CORS, é importante verificar qual requisição esta causando esse problema diretamente no console do seu navegador. Geralmente o problema é causado pela ausência de headers no lado do servidor. Para corrigir esse problema, garanta que o servidor está enviando os seguintes headers na sua resposta: ``` Access-Control-Allow-Origin: https://perfil.treinaweb.com.br Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Headers: * Access-Control-Max-Age: 86400 ``` Nesse exemplo, estamos permitindo que a origem `https://perfil.treinaweb.com.br` acesse os recursos daquele servidor, sendo possível o uso dos métodos HTTP GET e POST, juntamente com qualquer header adicional. Para os casos de preflight request, temos também o header `Access-Control-Max-Age` que funciona como um cache, em segundos, para essa request. Tenha uma atenção especial ao header `Access-Control-Allow-Origin`. Você pode utilizar `*` como sua origin ou até em partes dela (`https://*.treinaweb.com.br` por exemplo, para incluir todos os subdomínios da TreinaWeb), mas tente sempre limitar para origens conhecidas da sua aplicação, evitando assim que origens desconhecidas acessem seus servidores. Como enviar esses headers vai variar dependendo da linguagem ou servidor da sua aplicação. Como por exemplo, com express você pode definir os headers necessários usando [um middleware de CORS](https://expressjs.com/en/resources/middleware/cors.html): ```javascript var express = require('express') var cors = require('cors') var app = express() app.use(cors()) app.get('/products/:id', function (req, res, next) { res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () { console.log('CORS-enabled web server listening on port 80') }) ``` Caso você não tenha acesso ao código da sua aplicação, você pode configurar seu servidor web, como o Apache, para retornar esses headers: ```nginx Header set Access-Control-Allow-Origin "*" ``` Em outros casos, pode ser configurar o serviço que você está consumindo, como o [S3](https://www.treinaweb.com.br/blog/o-que-e-aws-s3/ "S3") da [Amazon](https://www.treinaweb.com.br/blog/introducao-a-amazon-web-services-aws/ "Amazon"). Esses serviços [podem ser configuráveis com regras específicas](https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html) para atender esses casos, porém isso varia de serviço a serviço. ## Conclusão Nesse artigo conhecemos o que significa de fato o CORS e como podemos resolver esses tipos de problemas. Existem algumas outras configurações que podem ser feitas para implementar o CORS nas suas aplicações, como o suporte a requests com credentials que não abordamos aqui. Para saber mais, temos uma excelente referência da Mozilla que explica em detalhes [como funciona o CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-BLOG-2-2.jpg) ](https://api.whatsapp.com/send/?phone=5544988609539&text=Olá,+li+o+artigo+no+blog+e+gostaria+de+saber+mais+sobre+a+TreinaWeb.) - [ #HTTP ](https://www.treinaweb.com.br/blog/tag/http) - [ #cors ](https://www.treinaweb.com.br/blog/tag/cors) - [ #frontend ](https://www.treinaweb.com.br/blog/tag/frontend) Autor ![Gabriel Machado](//secure.gravatar.com/avatar/411cd028754ca7f6e6dd7a06d87b883c?d=mm)## Gabriel Machado Autor dos cursos de cloud computing da TreinaWeb. Graduado em Gestão de TI pela FATEC e quase bacharel em Sistemas de Informação pela UFSCar. Tem experiência em desenvolvimento backend com PHP, mas se encontrou trabalhando com DevOps. [Microsoft Certified: DevOps Engineer Expert](https://www.youracclaim.com/badges/8e06b17f-b5bb-42f5-9bda-e9b542050f1a/public_url), [Azure Solutions Architect Expert](https://www.youracclaim.com/badges/18364536-29fe-49ad-9afd-f4b5193b2e5b/public_url) e [Azure Data Engineer Associate](https://www.youracclaim.com/badges/c3e135d4-5f2f-4360-8739-c3002e713e77/public_url), [AWS Certified Solutions Architect - Associate](https://www.youracclaim.com/badges/5f9675e2-6662-4ce6-824b-5694955d3f5d/public_url), e [Zend Certified Engineer (ZCE)](https://www.zend.com/en/yellow-pages/ZEND026022). [@gmsantos](https://about.me/gmsantos) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/gabriel-machado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/13150455/aplicacoes-self-contained-com-o-net-core-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ ASP.NET Core: Compreendendo AddMvc(), AddMvcCore(), AddControllers(), AddControllersWithViews() e AddRazorPages() ](https://www.treinaweb.com.br/blog/asp-net-core-compreendendo-addmvc-addmvccore-addcontrollers-addcontrollerswithviews-e-addrazorpages) Aprenda quando utilizar os métodos AddMvc(), AddMvcCore(), AddControllers(), AddControllersWithViews() e AddRazorPages() em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/201705171237-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Requisições Ajax no JavaScript com a Fetch API ](https://www.treinaweb.com.br/blog/requisicoes-ajax-no-javascript-com-a-fetch-api) A Fetch API veio para substituir a antiga XmlHttpRequest e o suporte dela já é bem consistente nos navegadores modernos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/sistemas-mensageria-min-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/11/Clean-Architecture-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que vem a ser a Clean Architecture? ](https://www.treinaweb.com.br/blog/o-que-vem-a-ser-a-clean-architecture) Confira nesse artigo uma introdução do que é a Clean Architecture, quais seus componentes e os benefícios ao utilizar essa arquitetura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/code-review-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 3 anos atrás ## [ O que é code review e quais são os benefícios? ](https://www.treinaweb.com.br/blog/o-que-e-code-review-e-quais-sao-os-beneficios) Confira neste artigo o que vem a ser o code review e quais são os benefícios de colocar isso em prática no seu time. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/closure-400x280.jpg) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 3 anos atrás ## [ O que é Closure ](https://www.treinaweb.com.br/blog/o-que-e-closure) Neste artigo, veremos o que é Closure e por que é tão importante entendê-lo para saber o que acontece por debaixo dos panos na linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/O-QUE-E-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html) No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ O que é e como começar com Go (Golang)? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-golang) Neste artigo vamos ter o contato inicial com a linguagem Go (Golag) e aprender um pouco sobre as suas características e como funciona a sua sintaxe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/EVENT-STORMING-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é o Event Storming? ](https://www.treinaweb.com.br/blog/o-que-e-o-event-storming) Em situações complexas, pode ser complicado enxergar as fronteiras entre domínios, subdomínios e bounded contexts. Para auxiliar nessa missão, existe uma técnica que pode ser utilizada: trata-se do Event Storming. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 05min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58