Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur l'erreur de ressource demandée

J'essaie de récupérer le flux d'un site Web d'actualités. Je pensais que j'utiliserais l'API de flux de Google pour convertir le flux feedburner en json. L'URL suivante renverra 10 articles du flux, au format json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

J'ai utilisé le code suivant pour obtenir le contenu de l'url ci-dessus

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

mais cela ne fonctionne pas et j'obtiens l'erreur suivante

XMLHttpRequest ne peut pas charger http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L' accès d' origine " http: // localhost " n'est donc pas autorisé.

Comment puis-je réparer ça?

Je pense que cela pourrait probablement être que Chrome ne prend pas en charge localhostle Access-Control-Allow-Origin- voir le problème de Chrome

Pour que Chrome envoie l' Access-Control-Allow-Originen-tête, alias simplement votre hôte local dans votre fichier / etc / hosts vers un autre domaine, comme:

127.0.0.1   localhost yourdomain.com

Ensuite, si vous accédez à votre script en utilisant yourdomain.comau lieu de localhost, l'appel devrait réussir.

Si vous utilisez le navigateur Google Chrome, vous pouvez pirater avec une extension.

Vous pouvez trouver une extension Chrome qui modifiera les en-têtes CORS à la volée dans votre application. De toute évidence, il ne s'agit que de Chrome, mais j'aime le fait que cela fonctionne avec zéro changement nulle part.

Vous pouvez l'utiliser pour déboguer votre application sur une machine locale (si tout fonctionne en production).

Remarque : si l'URL est rompue, le nom de l'extension est Access-Control-Allow-Origin: * . Je vous recommande de désactiver cette extension lorsque vous ne travaillez pas sur vos contenus, car, par exemple, YouTube ne fonctionne pas avec cette extension.

Essayez ceci - définissez l'appel Ajax en configurant l'en-tête comme suit:

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

Ensuite, exécutez votre code en ouvrant Chrome avec la ligne de commande suivante:

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

Juste pour info, j'ai remarqué ces informations de la documentation jQuery qui, je pense, s'appliquent à ce problème:

En raison des restrictions de sécurité du navigateur, la plupart des requêtes «Ajax» sont soumises à la même politique d'origine ; la demande ne parvient pas à récupérer les données d'un autre domaine, sous-domaine, port ou protocole.

Changer le fichier hosts comme @thanix n'a pas fonctionné pour moi, mais l'extension mentionnée par @dkruchok a résolu le problème.

Chrome ne vous permet pas d'intégrer deux hôtes locaux différents, c'est pourquoi nous obtenons cette erreur. Il vous suffit d'inclure le package Microsoft Visual Studio Web Api Core du gestionnaire de nuget et d'ajouter les deux lignes de code du projet WebApi dans votre WebApiConfig.cs fichier.

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

Alors tout est fait.

Si son service de démarrage de printemps appelant. vous pouvez le gérer en utilisant le code ci-dessous.

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

Pour le développement, vous pouvez utiliser https://cors-anywhere.herokuapp.com , pour la production, il est préférable de configurer votre propre 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 fonctionne très bien pour chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

c'est un plugin pour google chrome appelé "cors unblock"

Résumé: plus d'erreur CORS en ajoutant l'en-tête `` Access-Control-Allow-Origin: * '' aux requêtes Web locales et distantes lorsqu'il est activé

Cette extension permet de contrôler XMLHttpRequest et les méthodes d'extraction en fournissant des en-têtes personnalisés «access-control-allow-origin» et «access-control-allow-methods» à toutes les requêtes que le navigateur reçoit. Un utilisateur peut activer et désactiver l'extension à partir du bouton de la barre d'outils. Pour modifier la façon dont ces en-têtes sont modifiés, utilisez les éléments du menu contextuel du clic droit. Vous pouvez personnaliser la méthode autorisée. L'option par défaut est d'autoriser les méthodes 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'. Vous pouvez également demander à l'extension de ne pas écraser ces en-têtes lorsque le serveur les remplit déjà.

Eh bien, une autre façon est d'utiliser le proxy cors, il vous suffit d'ajouter https://cors-anywhere.herokuapp.com/ avant votre URL.Votre URL sera donc comme https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Le serveur proxy reçoit le http://ajax.googleapis.com/ajax/services/feed/load de l'URL ci-dessus. Ensuite, il fait la demande pour obtenir la réponse de ce serveur. Et enfin, le proxy applique le

Access-Control-Allow-Origin: *

à cette réponse originale.

Cette solution est excellente car elle fonctionne à la fois en développement et en production. En résumé, vous profitez du fait que la politique de même origine n'est implémentée que dans la communication navigateur-serveur. Ce qui signifie qu'il n'est pas nécessaire de l'appliquer dans la communication serveur à serveur!

vous pouvez en savoir plus sur la solution ici sur Moyen 3 façons de corriger l'erreur CORS

Veuillez utiliser @CrossOriginsur le backendsidecontrôleur de démarrage Spring (niveau de classe ou niveau de méthode) car la solution pour l'en- 'No 'Access-Control-Allow-Origin'tête d' erreur Chrome est présente sur la ressource demandée. '

Cette solution fonctionne pour moi à 100% ...

Exemple: niveau de classe

@CrossOrigin
@Controller
public class UploadController {

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

Exemple: niveau méthode

@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