web-dev-qa-db-fra.com

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

J'essaie d'aller chercher le fil d'un site Web d'actualités. Je pensais utiliser l'API de flux de Google pour convertir le flux feedburner en json. L'URL suivante renverra 10 messages 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 ça ne marche 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 le .__ demandé. Ressource. Origin ' http: // localhost ' n'est donc pas autorisé à accéder.

Comment puis-je réparer ça?

javascriptjqueryjsonajaxcors
79
Aneeez

Je pense que cela pourrait être dû au fait que Chrome ne prend pas en charge la localhost pour passer par le Access-Control-Allow-Origin - voir la question relative à Chrome

Pour que Chrome envoie Access-Control-Allow-Origin dans l'en-tête, alias simplement localhost dans le fichier/etc/hosts vers un autre domaine, par exemple:

127.0.0.1   localhost yourdomain.com

Ensuite, si vous souhaitez accéder à votre script en utilisant yourdomain.com au lieu de localhost, l'appel doit aboutir. 

76
thanix

Si vous utilisez le navigateur Google Chrome, vous pouvez pirater 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 s’agit uniquement de Chrome, mais j’aime le fait qu’il fonctionne avec aucun changement, où que ce soit.

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

Avis: Si l'URL est cassée, le nom de l'extension est Accès-Contrôle-Autoriser-Origine: *. Je vous recommande de désactiver cette extension lorsque vous ne travaillez pas sur vos fichiers, car par exemple, youtube ne fonctionne pas avec cette extension.

98
dkruchok

Essayez ceci - établissez un 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, lancez votre code en ouvrant Chrome avec la ligne de commande suivante:

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

Juste pour votre information, j'ai remarqué cette information dans la documentation de jQuery qui, je crois, s'applique à 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 peut pas récupérer les données d'un domaine, sous-domaine, port ou protocole différent.

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.

1
vancy.pants

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();
0
Kamil Kiełczewski

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);
        }
    };
}
0
Om.