Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no erro de recurso solicitado


93

Estou tentando obter o feed de um site de notícias. Pensei em usar a API de feed do Google para converter o feed do feedburner em json. O seguinte url retornará 10 postagens do feed, no formato json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Usei o seguinte código para obter o conteúdo do url acima

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

mas não está funcionando e estou recebendo o seguinte erro

XMLHttpRequest não pode carregar http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, o acesso de origem ' http: // localhost ' não é permitido.

Como faço para corrigir isso?


1
Testei seu código aqui, com o Chrome e funcionou conforme o esperado. Você tentou usar o atributo "crossDomain: true"?
Daniel Loureiro

Eu hospedei seu código aqui: learnwithdaniel.com/test.html . veja se você pode abrir sem erros. Se não obtiver erro, o problema é com o servidor
Daniel Loureiro

ótimo. Portanto, está relacionado com os cabeçalhos que o servidor envia quando o navegador faz uma solicitação para este html. Verificar "cors headers"
Daniel Loureiro

mesmo aqui com api godaddy
Gilson Gilbert

Esta pergunta não é uma duplicata? stackoverflow.com/questions/20035101/… Mais importante, esta outra pergunta tem respostas mais claras / completas.
The Red Pea

Respostas:


85

Acredito que provavelmente seja porque o Chrome não suporta localhosto Access-Control-Allow-Origin- veja o problema do Chrome

Para que o Chrome envie Access-Control-Allow-Origino cabeçalho, basta criar um alias de seu host local no arquivo / etc / hosts para algum outro domínio, como:

127.0.0.1   localhost yourdomain.com

Então, se você acessar seu script usando em yourdomain.comvez de localhost, a chamada deverá ser bem-sucedida.


Obrigado. Eu estava tendo esse problema e mudando para a borda do IE, o que me fez ver o erro subjacente no código do meu servidor que estava sendo obscurecido pela negação do Chrome de localhost.
Aluan Haddad de

7
Não funciona para mim também. Talvez uma atualização do Chrome tenha bloqueado essa "brecha"?
Marty C.

2
Nenhuma ajuda aqui também. Meu site já está configurado dessa forma, porém tenho uma grande diferença. Estou usando uma porta diferente. Tenho certeza de que se fosse a mesma porta, funcionaria. HTTP vs. HTTPS são, obviamente, portas diferentes, de modo que isso pode causar problemas a alguns de vocês. O meu não é HTTPS em particular, mas estou tentando acessar algo no mesmo domínio, mas em uma porta diferente da 80.
Jerry Dodge

E se a API estiver sendo acessada por extensões do Chrome, o que pode ser feito
viveksinghggits

111

Se você usa o navegador Google Chrome, pode hackear com uma extensão.

Você pode encontrar uma extensão do Chrome que modificará os cabeçalhos CORS rapidamente em seu aplicativo. Obviamente, este é apenas o Chrome, mas gosto que funcione sem nenhuma alteração em qualquer lugar.

Você pode usá-lo para depurar seu aplicativo em uma máquina local (se tudo funcionar na produção).

Aviso : Se o URL for quebrado, o nome da extensão é Access-Control-Allow-Origin: * . Eu recomendo que você desabilite esta extensão quando você não estiver trabalhando em suas coisas, porque, por exemplo, o youtube não funciona com esta extensão.


Isso definitivamente funcionou para mim também! ... Eu acho que o desenvolvedor do plugin o atualizou para caber em certos urls que você insere manualmente do que trabalhar para tudo, eu visitei o Youtube e outros sites e funciona muito bem. De qualquer forma, muito obrigado.
Kingston Fortune

1
é apenas para teste durante o desenvolvimento. Os usuários não vão adicionar o plugin no navegador
Caption Newt

Parece que essa extensão não está mais disponível, pelo menos nesse URL. Esta extensão parece funcionar, no entanto: chrome.google.com/webstore/detail/allow-cors-access-control/…
Gordon

Mas o que esta extensão está fazendo ? Você conhece uma versão de código aberto ou o que fazer para escrever uma que modifique os cabeçalhos dessa forma? Você provavelmente não deseja (bem, ok, eu não quero) executar uma extensão que tenha acesso total a URLs e dados sem saber o que está fazendo. Parece que pode ser uma idéia muito ruim se a extensão mudar de mãos, já for nefasta, etc. EDITAR: O mencionado abaixo é de código aberto , fwiw.
ruffin

9

Tente isto - defina a chamada Ajax configurando o cabeçalho da seguinte maneira:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Em seguida, execute seu código abrindo o Chrome com a seguinte linha de comando:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

1

Apenas para sua informação, percebi esta informação da documentação do jQuery que acredito se aplica a este problema:

Devido às restrições de segurança do navegador, a maioria das solicitações "Ajax" estão sujeitas à mesma política de origem ; a solicitação não pode recuperar dados com sucesso de um domínio, subdomínio, porta ou protocolo diferente.

Alterar o arquivo hosts como @thanix não funcionou para mim, mas a extensão mencionada por @dkruchok resolveu o problema.


0

O Chrome não permite que você integre dois locaishost diferentes, é por isso que estamos recebendo este erro. Você só precisa incluir o pacote Microsoft Visual Studio Web Api Core do gerenciador nuget. E adicionar as duas linhas de código no projeto WebApi em seu WebApiConfig.cs arquivo.

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Então tudo feito.


obviamente, isso se aplica apenas a back
infelizmente

0

Se estiver chamando o serviço de inicialização do Spring. você pode lidar com isso usando o código abaixo.

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

0

Para desenvolvimento, você pode usar https://cors-anywhere.herokuapp.com , para produção é melhor configurar seu próprio proxy

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();


0

O desbloqueio do cors funciona muito bem para o Chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

é um plugin para o google chrome chamado "desbloquear cors"

Resumo: Chega de erros CORS anexando o cabeçalho 'Access-Control-Allow-Origin: *' a solicitações da web locais e remotas quando ativado

Esta extensão fornece controle sobre XMLHttpRequest e métodos de busca, fornecendo cabeçalhos personalizados "access-control-allow-origin" e "access-control-allow-methods" para todas as solicitações que o navegador recebe. Um usuário pode ativar e desativar a extensão no botão da barra de ferramentas. Para modificar como esses cabeçalhos são alterados, use os itens do menu de contexto do botão direito. Você pode personalizar os métodos permitidos. A opção padrão é permitir os métodos 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'. Você também pode pedir à extensão para não sobrescrever esses cabeçalhos quando o servidor já os preencheu.


0

bem, outra forma é usar cors proxy, você só precisa adicionar https://cors-anywhere.herokuapp.com/ antes do seu URL.so seu URL ficará como https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

O servidor proxy recebe http://ajax.googleapis.com/ajax/services/feed/load do URL acima. Em seguida, ele faz a solicitação para obter a resposta desse servidor. E, finalmente, o proxy aplica o

Access-Control-Allow-Origin: *

a essa resposta original.

Essa solução é ótima porque funciona tanto no desenvolvimento quanto na produção. Em resumo, você está aproveitando o fato de que a política de mesma origem só é implementada na comunicação de navegador para servidor. O que significa que não precisa ser aplicado na comunicação de servidor para servidor!

você pode ler mais sobre a solução aqui no meio 3 maneiras de corrigir o erro CORS


-5

Use @CrossOriginno backendsidecontrolador de inicialização Spring (nível de classe ou nível de método), pois a solução para o 'No 'Access-Control-Allow-Origin'cabeçalho de erro do Chrome está presente no recurso solicitado. '

Esta solução está funcionando para mim 100% ...

Exemplo: nível de classe

@CrossOrigin
@Controller
public class UploadController {

----- OU -------

Exemplo: nível de método

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

Embora isso certamente não responda à questão do OP, tem um ponto válido. Consumir serviços / dados Spring RESTful por meio de javascript exige que você defina a @CrossOriginanotação. A todos os que votaram negativamente: Por favor, indiquem o motivo!
rwenz3l
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.