No 'Access-Control-Allow-Origin' header is present on the requested resource. | RESOLVIDO!
Vložit
- čas přidán 12. 09. 2024
- Eu tenho certeza que você já recebeu esse erro "No 'Access-Control-Allow-Origin' header is present on the requested resource." e finalmente nesse vídeo eu vou explicar o por que ele acontece, você vai entender que o browser tem um papel grande nisso e na real isso existe para a nossa segurança! Bora ver?
■ Valores que eu aplico para resolver o CORS: github.com/dev...
🔸 Link importantes para VOCÊ! (e pra me ajudar a continuar trazendo conteúdo!)
■ Tem dúvidas sobre arquitetura de camadas? Tratamento de erros? Quais as bases para colocar um projeto no ar de forma automática com Integração Contínua? Conheça meu curso do canal o Construindo CRUDs com qualidae hotm.art/mWYNKk3
■ Quer receber as novidades do canal antes de todo mundo? mariosouto.com...
■ Sabia que eu tenho uma lojinha? mariosouto.com...
🔸 Quer ver mais conteúdos meus? Segue ai!
■ / omariosouto
■ / devsoutinho
■ t.me/hipstersf...
✅ Tem dúvidas sobre arquitetura de camadas? Tratamento de erros? Quais as bases para colocar um projeto no ar de forma automática com Integração Contínua? Conheça meu curso do canal o Construindo CRUDs com qualidae hotm.art/mWYNKk3
Irmão, eu sempre tive esse problema e eu sempre o resolvi. Mas sempre tinha que ir no stack overflow e copiar tudo quanto era código até funcionar, inclusive coisas desnecessárias como especificar os headers no front. Agora pai, não tem mais erro! Valeu mesmo!
cara, valeu mesmo! conteúdo show. esse problema é uma dor de cabeça pra quem não teve nenhuma instrução e pensamentos sobre a comunicação entre navegadores e servidores. então estudar como funciona a internet, os protocolos de rede envolvidos, é muito importante!
Po um comentário desses faz meu dia, valeu demais 😍
Ajudou muuuuuito, estou trabalhando numa aplicação usando o ReactJS no frontend e Python no backend. Fiquei um dia preso nessa questão, mas você me ajudou bastante, muito obrigado!!
Muito bem explicado! Tinha dúvidas sobre o CORS e você esclareceu tudo! Muito obrigado!
Mario Souto muito obrigado por esse vídeo. serio salvou o meu dia, faz 4 dias que estou tentando resolver esse problema kkkkkk, muito obrigadooo
Rapaz desta forma só vai conseguir resolver se você tiver mexendo com uma api interna que você tenha acesso! Mas muitas pessoas ainda vão continuar tendo problemas devido que este erro da normalmente quando ajente faz uma requisição em uma api externa tipo Binance e etc. Se você for uma destas pessoas saiba que este erro de CORS dado por servidores externos você só vai conseguir resolver somente, no back-end de forma bastante simples, basta criar um novo arquivo e fazer um redirecionamento para a url desejada.
O lance é que qualquer outra forma de “resolver” vc vai tá burlando algo saca? Provavelmente vc vai passar por isso usando um serviço próprio ou da empresa que tu trabalha e vai ter que abrir um ticket pra liberar ou algo do gênero
@@DevSoutinho Mas eu já tive este problema com a api pública da Binance! Eu até hoje uso extensões para burlar no meu robô, mas depois de um tempão eu fui descobrir que a maneira correta de fazer o tratamento e fazendo isso que eu citei. Eu uso um recurso do php chamado 'curl'. Com poucas linhas.
@@Ronaldo61 foi uma das coisas q o Mario citou no vídeo kkkk
@@joaomarcos.85 Então eu não prestei atenção, por que eu assistir o vídeo completo e não vi a parte que ele explica!
@@Ronaldo61 ele citou somente
Top demais! Estava fazendo um aplicativo html que roda local e acessava um PHP para receber os dados e escrever no banco. Não conseguia resolver o problema do cors até ver seu video! Agora funcionou!
como?
@@cypriano No PHP que recebe os dados lá no servidor eu inseri no início do arquivo as seguintes linhas:
Basicamente, se você for fazer scrap ou usar api e der isso, é porque o servidor não ta te permitindo ter acesso. Eu vou testar aqui agora, mas acho que a solução é criar uma api que retorna o conteúdo do site, já que no backend não tem esse bloqueio
Isso aí!
Mas é possível habilitar meu domínio por Script para fazer requisições com o servidor?
Ótima explicação. Como você disse se é o servidor backend que é responsável por permitir o acesso de endereços diferentes, não entendo por que o pessoal fala em configurar o CORS no Angular/FrontEnd? Fica aí a minha dúvida. Nos mais muito obrigado!
Quem fala isso não sabe o que tá falando ahahahahh
Esse problema já infernizou minha vida. Valeu pelo vídeo!
Monstro esse Mario. Parabéns mano, seus conteúdos são sempre muito didáticos.
minha dúvida é: como fazer isso usando JS puro??
Minha dúvida também!
Pelo que entendi, cors pode ser usado após o usuário ser autenticado em uma aplicação, recebe autorização no navegador assim obtendo informações sensíveis dele no caso dentro da aplicação.
Muito boa a explicação, ajudou pra caramba!! Parabéns pelo vídeo!!
corszinho safado sempre causando problemas valeu mano
Fera, sempre arrasando com as dicas #devsoutinho !!! Valew
Parabéns pelo trampo! Uma duvida em php não funcionou. Pode mostrar como se faz?
Salvou a minha vida!! vou deixar o like
Muuuuuitisssimo obrigado!
Simples e conciso, muito bom! Existe algum motivo por usar yarn ao invés de NPM ou é uma questão de preferência?
Preferência mesmo
A diferença, é que o yarn é um pouco mais rapo para instalar os pacotes
E tbm não precisa usar o "run" para executar um script do package.json
@@ramonpaolomaran2253 saquei, obrigado pela dica Ramon!
@@ramonpaolomaran2253 O Yarn também não fica modificando o arquivo de lock quando vc roda um install, no NPM tem que usar o NPM CI se não me engano, ele é mais chatinho quanto a isso
Mas como eu resolveria este problema em um backend Node usando Express ??
Se puder responder por favor, estou com esse problema a um tempo já
Procura como setar headers no express, e depois da uma estudada sobre interceptors no express e a lib cors no NPM :D
Até que enfim.... eu tinha resolvido, mas não sabia como!!! VLW
Conteúdo muito bom!!! Sou fã desse canal.
Caramba, tive esse problema ontem mesmo em um projeto aqui, e tinha deixado de lado, ai você solta esse vídeo. Estou com medo
Te amo de mais mano, eu tirei um peso das costa com esse video muito obrigado de coração vei
E eu tentando resolver pelo clientside 😬muito obrigado 💙
Tmj!!!
Muito bom o vídeo, mas e no caso de a API não ter essa opção incluída de permissão de CORS, o que devemos fazer? Isso não foi explicado. Se poder dizer como resolver, agradeço.
Se a API não devolver, vc teria que criar uma rota no seu backend e via essa rota fazer o request
@@DevSoutinho blz, até aí também ok, mas no caso de eu querer consumir de uma API pública por ex, onde eu não tenho acesso, só consigo fazer um fetch() mesmo, e aí como resolver? Uma coisa que eu fiz aqui pra burlar isso foi usar uma extensão do chrome que permite/bloquei o uso do CORS.
Esse video é exclusivo pra quem esta usando o NEXT.js? o titulo do video nao especifica isso porem next.config.js é pra next.js e foi a unica forma de resolução.
Não é exclusivo de NextJS.
Headers fazem parte do protocolo HTTP, independente da ferramenta de Back End você pode adicionar esses headers no projeto \o
@@DevSoutinho Ele serve pra um contexto Vercel? Hospedei minha api la.
cara você é muito brabo ajudou demais aqui
Fico feliz /ooooo valeu por comentar
No Vuejs eu coloco essas configurações no Vite.config.js ??
Não, vc não faz isso no vue o backend que vc ta interagindo precisa fazer do lado dele.
aonde está o código ???
Simplesmente obrigado, ajudou demais!
Não entendi onde colocar e chamar esse arquivo.
Na raiz do htdocs?
Na raiz do projeto?
E onde chama esse código?
Ficou muito confuso.
eu tbm achei confuso isso
E se estou tentando apenas fazer webscraping e não tenho acesso a modificar o back-end? Estou fazendo com Vue 3, tenho que fazer os testes e implementações através do meu servidor e depois que subir teoricamente é pra funcionar?
Tu obrigatoriamente tem que ter um servidor fazendo a ponte pelo menos :/
Resolveu! Toma meu like e minha inscrição!
Salvou de mais Mario, muito obg!
Eu que agradeço 😁
onde crio esse arquivo quando utilizar o react (com qual nome)
, e teria como subir as opções denovo por que esta insdisponivel o repositorio com o arquivo completo
Só existe no backend essa configuração, do lado do Front tu não muda nada
Parabens pelo vídeo! Sempre conteúdos incríveis!
Uma duvida, estou com um problema semelhante em um projeto Reactjs + API Wordpress. Como eu faria esse ajuste? Estou iniciando meus estudos e esbarrei nessa questão e não tenho encontrado soluções para isso em minhas pesquisas :/
No WordPress acho que é via alguma config no arquivo htaccess 🤔 da uma olhada na parte de WP api que deve ter coisa sobre “setup custom headers” aí tu aplica o vídeo
Muito bom todos os vídeos e esse ajudou muito.
Legal, ajudou muito. Valeu
Sem palavras, @Mario!
Salvou hehehehe
Vi este vídeo mas agora não consegui solucionar este erro que aparece no meu :(
Fiz um portfólio em Next.js e estou listando artigos que estão no Notion. No local funcionou de boa, mas quando fiz Deploy na AWS...
Tô quase desistindo de ter blog dinâmico kkkkk
Os headers estão vindo na requisição quando vc ta colocando na aws? outra duvida, cogitou usar a vercel pro deploy?
Muito bom Mario,,, Ótima dica. já apanhei muito com isso
ta foda! meu powershell so faz multiplcação! ja desisti de tentar arrumar
Poxa :(
Cara, meu cors funciona no localhost, porém no Cloudflare Pages ele não aceita de jeito nenhum :/
as bolinhas que ce apontou no video nao apareceram pra mim, normal isso?
Muito F#da ajudou muito Soutinho vc é o cara
Como fax pra configurar chaves ou limitar o acesso de outros agentes externos a API?.. Bom video!!!
Isso é lógica no backend, tu controla salvando a info do uso no banco de dados
Tô tendo algo diferente. To usando NextJS com Axios, e o header Authorization, depois de logar, é adicionado ao default do Axios. Mas nunca chega no backend, porém aparece na requisição. o Erro é 's been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.' Ja revirei a net e nada até agora
Olhando na aba network do browser, não vem o do backend?
@@DevSoutinho não. Até pq o next com m build, eu percebo que as requisicoes ou não aparecem explicitamente ou n sei ver.
@@DevSoutinho consegui ver. no meu GEt tem o Authorization, na resposta que volta com 401, metódo OPTION vem isso:
Request URL: [minha url de get]
Request Method: OPTIONS
Status Code: 401
Response headers:
access-control-allow-credentials: true
Access-Control-Allow-Headers: access-control-allow-credentials,access-control-allow-methods,access-control-allow-origin,authorization
access-control-allow-methods: *
access-control-allow-origin: ***omitted***
access-control-expose-headers: access-token
allow: GET, PUT, POST, DELETE, HEAD, OPTIONS, PATCH, PROPFIND, PROPPATCH, MKCOL, COPY, MOVE, LOCK
content-length: 80
content-security-policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
content-type: application/json; charset=utf-8
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
Bom video brother!! Ganhou mais um inscrito.
Muito bom Mario, ajudou muito!!
cara eu to quebrando a cabeça já faz algumas semana nisso mds, me da uma luz ai, to tendo esse problema ai porem minha API REST está hospedada pelo infinityfree com o wordpress e to requisitando ela pelo meu aplicativo via Vite React hospedada no vercel mas n vai de jeito nenhum
sou iniciante só sei front end kk
@@trichains1 tu teria que alterar algo no WordPress pra poder bater. Procura sobre como habilitar CORS no WordPress
Perfeita a explicação man
Fala Mário, mto bem explicado cara, mas infelizmente ainda não sanou o meu problema.
Nesse exemplo que vc mostrou, vc usa uma api que vc msm tem o controle de definir ali as regras do cors.
No meu caso, eu preciso acessar uma api do Office 365 SharePoint pra obter algumas informações.
A requisições funcionam perfeitamente em outras aplicações, cm vc msm explicou, porém no navegador não funciona.
Queria saber se tem como saber quais regras temos q passar nesse caso
Tu consegue colocar um backend no meio? Ou tem que ser via browser?
Hj a solução já esta assim meu amigo..
Tenho uma api que já acessa esses dados. Assim funciona.
Porém gostaria que não tivesse essa ponte.
Vlw obrigado pelo feedback
@@AdelsonSilvaarms olha da uma pesquisada por JSONP, se a microsoft implementou vai funcionar stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created
queria saber alguem me ajudace no wordpress no tema eu coloco este codigo onde ?
E se ao invés desse arquivo de configuração do CORS não existir, e eu usar uma lib do próprio CORS para usar em um middleware? Como faria?
ai é só seguir o tutorial da lib mesmo \o
Tô passando pelo mesmo problema, só que com angular no front e back end java com spring security e api gateway. Acabei de descobrir que é meu api gateway que tá barrando as requisições do front angular. Foi uma mão na roda entender o problema, pois na internet não achei em nenhum canto explicando o motivo do bloqueio!
Valeu pelo comentário 😍🤝🎉 e que bom que o vídeo ajudou!
Que legal Valmir. Estou com o mesmo problema, a única diferença para o seu cenário é que no meu caso o back end é em .Net Core. Qual configuração você aplicou no api gateway para conseguir vencer o CORS?
Boa tarde Valmir, como você descobriu que sua api gateway está barrando e qual foi a solução. Já tentei pela parte do back-end mas sem êxito, acredito que o meu problema esteja por lá mesmo.
Esse cara é um deus pqpqpq
Obrigado, filhote! Um cheiro!
O link dos "valores que eu aplico para resolver o CORS" expirou!!
Atualizei! Valeu
amigo e quando a api já está em um servidor online? como faço pra liberar o acesso?
Estou vendo o vídeo com dúvida. Eu subi um repositório (público) no gitHub, mas vi que a aplicação não está aceitando nenhum documento js, mas quando eu abro o documento dentro do editor de códigos, usando um live server, funciona normal. Vi também que quando abro pelo explorador de arquivo também não roda JS (Que eu preciso para rodar a aplicação).
Obs: Eu sei que o servidor do GitHub só aceita documentos HTML, CSS e JS.
Alguém que manja, poderia me ajudar por favor??
Estou com esse erro: Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto
falha na resposta de comprovação (preflight) do CORS
Tenho um frontend em ReactJS e backend em PHP. No teste no Insomnia, funciona perfeitamente.
No index.php do backend, coloquei isso aqui, mas não adiantou:
Faz tempo que não mexo com PHP, mas isso aí contempla GET e OPTIONS?
@@DevSoutinho sim. Tenho várias telas que enviam requisições para esse backend funcionando de boa. Somente uma tela que deu esse erro. Mas vou colocar as configurações da forma como vc recomenda pra ver se dá certo.
Testei. Não deu certo.
to sofrento pq uso o fastify e não vem dizendo onde configuro isso
parabéns, mais claro impossível.
Adicionar "Access-Control-Allow-Origin": "*" oferece riscos?
Pensando em uma API Stateless, que não guarda cookies e tal, se ela for exposta pro mundo tá safe.
O problema do allow * é se você não fez uma API corretamente e ela guarda estado, aí alguém pode fazer algum tipo de ataque.
Eu só posso deixarr o meu MUITO OBRIGADO kkkkkkkkkk, me ajudou muito!
Ótimo vídeo, ajudou muito.
Estou fazendo testes com JEST em um front Nextjs e banco de testes/api teste. Coloco a mesma configuração do vídeo no next config, porém ao rodar o teste de api da o erro: Response for preflight has invalid HTTP status code 404. Porém a função chamada no teste retorna os dados da api, mas acontece esse erro junto. Teria então que configurar manual o back para aceitar o acesso do meu origin?
Oi amanda tudo bom? Em teoria se tu fez igual no vídeo n deveria ta rolando. Minha dúvida ficou: Como você ta fazendo uma chamada HTTP em um teste do jest? Esse erro só deveria acontecer no ambiente do browser.
Em testes de unidade, tu pode usar uma lib como o nock e "mockar" a resposta HTTP.
@@DevSoutinho na verdade são testes de integração, onde subo um front e um back end através de features de teste, esse é um back de testes, então eu não mocko nada, chamo a api direto no teste e o componente que estou testando, estou usando jsdom como environment
@@DevSoutinho este erro aparece no console do teste do jest (terminal). Este teste que me refiro ao qual estou fazendo, retorna o valor certinho que a chamada da api faz, mas junto desse retorno vem este erro de preflight 404
@@amandalaureano7864 saquei… tu pode fazer o seguinte
- olha quais Headers vem no response do backend quando vc faz o fetch no front
- tenta forçar mandar os headers que eu customizo no vídeo do lado do Back e vê se muda 🤔
@@DevSoutinho vou tentar!! Valeu demais!!!
Show! Vlw demais!
Estou tentando entender como colocar essa informação na minha API do protheus mas não entendi.
Oi, quando vai usar o IONIC para criar apps
Belo vídeo, tô fazendo um teste pra estágio e tá dando esse erro, agora lascou kkkkkkkkkk
Mano eu recebi esse erro ontem kkkk, muito obrigado ajudou dms
Descobri o meu problema de cross origin.
Era que no Banco estava int e n9 código estava str.
No xamp funcionava mas remoto não..
Pois no Banco remoto errei um atributo.
Coloquei int sem querer
Em que lugar do código eu importo esse arquivo next.config.js?
Lugar nenhum, o próprio next lê o arquivo
Opaaa, agora me tira uma duvida, eu estou usando a api do notion e estou tendo esse erro, o que eu posso fazer???
modifiquei meu código e agora ele já está certo, porem continua dando o mesmo erro.
Quando vc olha na aba network, os headers aparecem? Existe um cache no browser, tenta usar outro navegador só pra teste
@@DevSoutinho aparece o localhost que estou usando de backend duplicado, e um deles está em vermelho.
@@augusto4586 n é duplicado, é a chamada com o OPTIONS, certo?
@@DevSoutinho meio que consegui achar onde estava dando erro, esse erro está sendo na parte do axios não sei pq tipo minha baseURL está certa porem ele continua dando erro. Vou tentar resolver aqui, muito obrigado pela paciência.
como coloco isso em um servidor xampp ?
já tinha sofrido disso, resolvi na época mas n tinha detalhes de como a coisa funfava under the hood, muito bom!
Tem como colocar mais de um origin?
Sim! separando por , ou ; se nao me engano
@@DevSoutinho acho que ; finaliza a linha e da erro, se for é vírgula
Amigo, tem como tu colocar quais os headers que cê autorizou ? obg....
Opaa, coloquei na descrição!
@@DevSoutinho cara obrigado, só que agora minha requisição POST virou option.....e tou chorando pra resolver...hahaha, tanto a post como a put.. tudo tá assim
Como faco isso no javascript ou no php, alguem poderia me ajudar
eu to fazendo um projetinho com meu irmão , e deu erro de CORS pq ele errou a url ...eu tenho pesadelos até hoje com o CORSa
Obrigado me ajudou muito
Deparei-me com esse erro ontem e fiquei um bom tempo tentando entender como resolver kkkk
namoral vei, uns 3 dias nisso já, fiz de tudo e em nenhum momento o yt indicou o vídeo
:((( mas deu certo agora??
A ideia é apenas criar este arquivo e o backend se vira?
No caso o backend precisa sempre responder com os headers que eu mostro no vídeo
eu nao to conseguindo em vue.js 3 ta dando o mesmo erro.......
Mas o problema é no server não no Front :/ a API que vc ta acessando tem que adicionar o código do vídeo
api no codeldignet 3
nao tem como voce fazer um video com vue.js e codeldignet 3
Como funfar isso no angular??
Mas a maioria dos DEVs que tem esse problema é justamente no frontend e não tem acesso ao backend, ficou na mesma.
Eu tive esse mesmo problema ao fazer scrapping por dentro de uma extensão Chrome que criei que busca dados uma página, onde eu capturava os dados e tentava fazer um post para gravar em um banco que criei, porém parei no cors ao fazer a requisição.
A solução foi criar uma outra extensão e usar um recurso chamado sendMessage onde eu enviei os dados para outra extensão que fica ouvindo e dessa outra extensão eu faço o post.
Eu poderia usar um selenium, ou pupetter, porém para o meu caso acho extensões Chrome mais interessantes para fazer scrapping.
lenda
Tamo aí pra resolver as dúvida da humanidade hahahah
o meu da esse erro por causa de uma imagem, o que eu faço
Atualiza o video para Next14. Please...
muito muito obrigado
Conseguir resolver problema, com uso do nuxt.js usando proxy do axios que tem na documentação e fiz deploy no heroku.
Aeeeeee!
Quero ver fazer funcionar na Vercel.
Show, man
mto bom!!