Ferramentas e métodos populares para simular solicitações de origem cruzada em ambientes de desenvolvimento local giram principalmente em torno do manuseio e ignorando as restrições de compartilhamento de recursos de origem cruzada (CORS) impostas pelos navegadores. Essas ferramentas ajudam os desenvolvedores a testar e depurar as interações cruzadas, permitindo os CORs nos servidores locais, usando proxies ou alavancando extensões e configurações do navegador. Abaixo estão as informações detalhadas sobre algumas abordagens e ferramentas comuns usadas para esse fim.
Entendendo os cors
O compartilhamento de recursos de origem cruzada (CORS) é um mecanismo de segurança implementado em navegadores que restringem os aplicativos da Web em execução em uma origem (domínio, protocolo, porta) de acessar recursos em uma origem diferente, a menos que o servidor o permita explicitamente através de cabeçalhos HTTP específicos. Os CORSs trabalham por servidores que enviam cabeçalhos de volta como 'Access-Control-Alow-Origin` para indicar quais domínios têm permissão para acessar recursos. Os navegadores aplicam isso enviando uma solicitação de "pré-voo" (uma solicitação de opções HTTP) para certos tipos de chamadas de origem cruzada para verificar as permissões antes de fazer a solicitação real. Os cabeçalhos do CORS controlam não apenas quais origens são permitidas, mas também quais métodos e cabeçalhos HTTP podem ser usados e se credenciais como cookies podem ser enviados.
Desafios de desenvolvimento local
Durante o desenvolvimento local, os projetos geralmente são executados em diferentes portas ou domínios, o que conta como origens diferentes e desencadeia restrições dos CORs, dificultando o teste de solicitações de origem cruzada. Os desenvolvedores precisam de ferramentas ou configurações que simulam ou ignorem essas restrições localmente para permitir que seu front-end e back-end se comuniquem adequadamente sem afetar os ambientes de produção.
Ferramentas e métodos para simular ou ignorar os CORS localmente
1. Servidor local proxying
O proxying é uma das soluções mais robustas e amplamente usadas. Envolve a execução de um servidor proxy que atua como um intermediário entre o cliente e o servidor API, roteando efetivamente solicitações de origem cruzada pela mesma origem para evitar problemas de CORS.
-Servidores de desenvolvimento com suporte de proxy interno: muitas ferramentas de desenvolvimento front-end, como Vite, Webpack Dev Server ou Create React App Support Configurando um proxy. Por exemplo, o aplicativo Create React permite que os desenvolvedores defina um proxy no `package.json` ou` setupProxy.js` que encaminha as chamadas da API para outro servidor em execução em uma porta ou domínio diferente. Dessa forma, o navegador acha que está se comunicando com a mesma origem, pois as solicitações são feitas ao próprio servidor de desenvolvimento, o que as encaminha para o servidor de API de destino.
-Servidores de proxy independentes: ferramentas como http-proxy-middleware (para node.js) ou proxies locais como o nginx configurado em máquinas locais podem servir como proxies para rotear solicitações e adicionar os cabeçalhos de cors necessários. Os desenvolvedores podem configurar esses servidores para modificar as respostas em tempo real para incluir `` acesso-controle-arel-origin: *`ou outros cabeçalhos apropriados.
2. Cópias da API local de Cors
Executar uma instância local da API que suporta CORS é outra abordagem eficaz. Usando o Docker ou as configurações locais, os desenvolvedores executam a API em suas máquinas com CORS ativados no modo de desenvolvimento, o que permite que o front-end em execução no host localhost se comunique livremente sem restrições. Isso tem os benefícios do controle completo e nenhuma dependência de ambientes externos.
3. Extensões do navegador para desenvolvimento
Para testes rápidos ou depuração, muitos desenvolvedores usam extensões de navegador que desativam ou modificam temporariamente o comportamento do CORS nos navegadores. Essas ferramentas devem ser usadas apenas no desenvolvimento, nunca em produção:
- CORS Desbloquear o Chrome: Esta extensão modifica os cabeçalhos de solicitação e permite solicitações de origem cruzada injetando os cabeçalhos necessários nas respostas para ignorar a aplicação do CORS do navegador.
- CORS em todos os lugares para o Firefox: semelhante à extensão do Chrome, ele ativa as restrições de CORS, permitindo que os desenvolvedores testem chamadas de origem cruzada sem alterar as configurações do servidor.
- Menu Desenvolvimento do Safari: o Safari permite desativar temporariamente as restrições de origem cruzada através do menu, úteis para usuários de Mac que fazem testes locais.
4. Executando um servidor da web local em vez de abrir arquivos
Uma causa raiz dos erros do CORS está carregando arquivos diretamente com o arquivo `: //` protocolo nos navegadores. Muitos tutoriais e perguntas e respostas apontam que a abertura de páginas HTML diretamente sem um servidor da Web aciona erros do CORS porque os navegadores bloqueiam muitas operações de segurança. Assim, a execução de um servidor HTTP local mínimo usando ferramentas como o servidor HTTP interno do Python (`Python3 -m http.server`), o pacote` http-server` do Node, ou o servidor ao vivo, permite origens corretas de localhost e evita esses erros.
5. Modificando cabeçalhos de resposta ao servidor
Ao desenvolver sua própria API ou serviço de back -end, a adição de cabeçalhos CORS normalmente é feita incluindo o middleware ou configurando o servidor da Web para oferecer suporte ao CORS. Estruturas e idiomas de back -end populares estabeleceram maneiras de permitir CORS:
- Node.js/Express: Usando o pacote de middleware `cors` simplifica a adição de cabeçalhos CORS.
- API da Web ASP.NET: suporta atributos como `[atividades]` que permitem especificar origens, métodos e cabeçalhos permitidos para solicitações de origem cruzada.
-Django: Middleware como `Django-cors-header 'é usado para permitir que os CORs suportem localmente.
6. Ispassando CORS com proxies públicos ou de terceiros
Alguns serviços on -line como o Beeceptor permitem que os desenvolvedores testem APIs e ignorem os CORS, roteando solicitações por meio de seus servidores proxy. Esses serviços adicionam os cabeçalhos CORS apropriados, para que os navegadores aceitem as respostas. Essa abordagem é útil para depuração rápida quando a configuração local não é viável, mas deve ser usada com cautela e não em ambientes de produção.
***
Resumo de ferramentas e técnicas populares
- PROXIA DE DEVERVER DO DEV: Usando recursos de proxy em ferramentas como o Vite, crie o aplicativo React, Webpack Dev Server.
-Servidores de proxy locais: http-proxy-middleware em node.js, nginx configurado como um proxy.
- API local com CORS ativado: Recipientes de Docker em execução ou instâncias de API locais configuradas para desenvolvimento com CORS.
- Extensões do navegador: Cors Unblock (Chrome), CORS em todos os lugares (Firefox), Safari desative as restrições cruzadas-origin.
-Servidor HTTP local: executando o `http.server` do Python,` http-server` do node ou servidor ao vivo em vez de usar o arquivo `: //` urls.
-Middleware da estrutura de back-end: `cors` pacote para node.js,` [enableCors] `na API da web asp.net,` django-cors-headers` para django.
- Serviços de proxy de terceiros: Beeceptor e serviços similares para ignorar temporariamente os CORS.