Nessuna intestazione "Access-Control-Allow-Origin" è presente nell'errore di risorsa richiesta

Sto cercando di recuperare il feed di un sito Web di notizie. Ho pensato di utilizzare l'API feed di Google per convertire il feed feedburner in json. Il seguente URL restituirà 10 post dal feed, in formato json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Ho usato il seguente codice per ottenere il contenuto dell'URL sopra

$.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) {
    //.....
  }
});

ma non funziona e ricevo il seguente errore

XMLHttpRequest non può caricare http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta. L'accesso all'origine " http: // localhost " non è pertanto consentito.

Come lo risolvo?

Credo che sia probabile che Chrome non supporti localhostper passare attraverso il Access-Control-Allow-Origin- vedere il problema di Chrome

Per fare in modo che Chrome invii Access-Control-Allow-Originnell'intestazione, alias del tuo localhost nel tuo file / etc / hosts a qualche altro dominio, come:

127.0.0.1   localhost yourdomain.com

Quindi, se si accede al proprio script utilizzando yourdomain.cominvece di localhost, la chiamata dovrebbe riuscire.

Se utilizzi il browser Google Chrome puoi hackerare con un'estensione.

Puoi trovare un'estensione di Chrome che modificherà le intestazioni CORS al volo nella tua applicazione. Ovviamente, questo è solo Chrome, ma mi piace che funzioni con zero modifiche ovunque.

Puoi usarlo per eseguire il debug della tua app su una macchina locale (se tutto funziona in produzione).

Avviso : se l'URL viene danneggiato, il nome dell'estensione è Access-Control-Allow-Origin: * . Ti consiglio di disabilitare questa estensione quando non lavori sulle tue cose, perché, ad esempio, YouTube non funziona con questa estensione.

Prova questo: imposta la chiamata Ajax impostando l'intestazione come segue:

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

Quindi esegui il codice aprendo Chrome con la seguente riga di comando:

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

FYI, ho notato queste informazioni dalla documentazione di jQuery che credo si applichino a questo problema:

A causa delle limitazioni di sicurezza del browser, la maggior parte delle richieste "Ajax" sono soggette alla stessa politica di origine ; la richiesta non può recuperare correttamente i dati da un dominio, sottodominio, porta o protocollo diverso.

La modifica del file hosts come @thanix non ha funzionato per me, ma l'estensione menzionata da @dkruchok ha risolto il problema.

Chrome non ti consente di integrare due diversi localhost, ecco perché stiamo ricevendo questo errore. Devi solo includere il pacchetto Microsoft Visual Studio Web Api Core da nuget manager e aggiungere le due righe di codice nel progetto WebApi nel tuo WebApiConfig.cs file.

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

Allora tutto fatto.

Se chiama il servizio di avvio primaverile. puoi gestirlo usando il codice sottostante.

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

Per lo sviluppo puoi usare https://cors-anywhere.herokuapp.com , per la produzione è meglio impostare il tuo 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();

cors unblock funziona alla grande per Chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

è un plugin per google chrome chiamato "cors unblock"

Riepilogo: niente più errori CORS aggiungendo l'intestazione "Access-Control-Allow-Origin: *" alle richieste Web locali e remote quando abilitate

Questa estensione fornisce il controllo sui metodi XMLHttpRequest e fetch fornendo intestazioni personalizzate "access-control-allow-origin" e "access-control-allow-methods" a ogni richiesta ricevuta dal browser. Un utente può attivare e disattivare l'estensione dal pulsante della barra degli strumenti. Per modificare il modo in cui queste intestazioni vengono modificate, utilizzare le voci del menu contestuale di scelta rapida. Puoi personalizzare il metodo consentito. L'opzione predefinita è consentire i metodi "GET", "PUT", "POST", "DELETE", "HEAD", "OPTIONS", "PATCH". Puoi anche chiedere all'estensione di non sovrascrivere queste intestazioni quando il server le riempie già.

beh, un altro modo è usare il proxy cors, devi solo aggiungere https://cors-anywhere.herokuapp.com/ prima del tuo URL. quindi il tuo URL sarà come https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Il server proxy riceve http://ajax.googleapis.com/ajax/services/feed/load dall'URL sopra. Quindi fa la richiesta per ottenere la risposta di quel server. Infine, il proxy applica l'estensione

Access-Control-Allow-Origin: *

a quella risposta originale.

Questa soluzione è ottima perché funziona sia nello sviluppo che nella produzione. In sintesi, stai sfruttando il fatto che il criterio della stessa origine viene implementato solo nella comunicazione da browser a server. Il che significa che non deve essere applicato nella comunicazione da server a server!

puoi leggere di più sulla soluzione qui su 3 modi per correggere l'errore CORS

Utilizza @CrossOriginil backendsidecontroller di avvio in Spring (a livello di classe o di metodo) poiché la soluzione per l' 'No 'Access-Control-Allow-Origin'intestazione dell'errore di Chrome è presente sulla risorsa richiesta. "

Questa soluzione funziona per me al 100% ...

Esempio: livello di classe

@CrossOrigin
@Controller
public class UploadController {

----- O -------

Esempio: livello di metodo

@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