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

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?

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.

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.

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

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.

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.

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);
        }
    };
}

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();

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.

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

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