web-dev-qa-db-fra.com

Pourquoi est-ce que je vois une erreur "Origine non autorisée par Access-Control-Allow-Origin" ici?

Je vois l'erreur suivante:

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

avec ce code:

var http = new getXMLHttpRequestObject();
var url = "http://gdata.youtube.com/action/GetUploadToken";
var sendXML = '<?xml version="1.0"?><entry xmlns="http://www.w3.org/2005/Atom"'+
    'xmlns:media="http://search.yahoo.com/mrss/'+
    'xmlns:yt="http://gdata.youtube.com/schemas/2007">'+
    '<media:group><media:title type="plain">My First API</media:title>'+
    '<media:description type="plain">First API</media:description>'+
    '<media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>'+
    '<media:keywords>first, api</media:keywords></media:group></entry>';
http.open("POST", url, true);
http.setRequestHeader("Authorization", "AuthSub token=" + AccessToken);
http.setRequestHeader("X-GData-Key", "key="+ dev_key);
http.setRequestHeader("Content-Type", "application/atom+xml; charset=UTF-8");

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseXML);
    }
}
http.send(sendXML);

Qu'est-ce qui peut causer cela et comment puis-je le résoudre?

javascriptajaxcorsxmlhttprequestyoutube-api
151
Muhammad Usman

Javascript est limité lors de requêtes en ajax en dehors du domaine actuel.

  • Ex 1: votre domaine est exemple.com et vous voulez faire une demande à test.com => vous ne pouvez pas.
  • Ex 2: votre domaine est exemple.com et vous voulez faire une demande à inner.example.com => vous ne pouvez pas.
  • Ex 3: votre domaine est exemple.com:80 et vous souhaitez faire une demande à exemple.com:81 => vous ne pouvez pas
  • EX 4: votre domaine est exemple.com et vous souhaitez faire une demande à exemple.com => vous le pouvez.

Javascript est limité par la "même politique d'origine" pour des raisons de sécurité, de sorte qu'un script malveillant ne peut pas contacter un serveur distant et envoyer des données sensibles.

jsonp est une façon différente d’utiliser javascript. Vous faites une demande et les résultats sont encapsulés dans une fonction de rappel exécutée dans le client. Cela revient à associer une nouvelle balise de script à la partie principale de votre code HTML (vous savez que vous pouvez charger des scripts provenant de domaines différents des vôtres ici).
Cependant, pour utiliser jsonp, le serveur doit être configuré correctement. Si ce n'est pas le cas, vous ne pouvez pas utiliser jsonp et vous DEVEZ vous fier à un proxy côté serveur (PHP, ASP, etc.). Il existe de nombreux guides sur ce sujet, il suffit de le rechercher sur Google!

171
andreapier

XMLHttpRequest ne vous laissera pas atteindre localhost:8080 en raison de la "même politique d'origine".

Vous pouvez autoriser les demandes des navigateurs modernes en ajoutant un en-tête à votre réponse dans localhost:8080:

Access-Control-Allow-Origin: *

Vous pouvez le faire en ajoutant des directives à votre serveur HTTP ou en ajoutant des en-têtes via un code côté serveur (PHP, Ruby, ...).

En savoir plus sur les requêtes ajax Cross-Origin sur https://developer.mozilla.org/en/http_access_control

88
Sunny

Si vous utilisez Chrome, une solution simple (à des fins de développement uniquement) consiste à utiliser l'option --disable-web-security.

37
Deqing

Ajoutez un global.asax dans votre solution.

Ajouter

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

dans

protected void Application_BeginRequest(object sender, EventArgs e)
{
}
10
Ammar Khan

Si vous utilisez Apache, cela fonctionne: mettez ceci dans/créez un fichier .htaccess dans votre racine publique et ajoutez toute autre extension de fichier dont vous pourriez avoir besoin.

<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
9
Eric Leroy

Pour le développement local, vous pouvez utiliser un outil pour modifier les en-têtes de réponse HTTP. Par exemple, Charles peut le faire à l'aide de l'outil de réécriture inclus: Outil de réécriture

Ajoutez simplement une nouvelle règle pour le domaine/emplacement cible avec:

Type: Add Header
Where: Response
Replace
     Name: Access-Control-Allow-Origin
     Value: *
Replace All
7
Christian Müller

Ici, nous devons faire deux choses pour Apache Http

1) Dans le fichier httpd.config, décommentez ce fichier

LoadModule headers_module modules/mod_headers.so

2) Ajoutez cette ligne en bas.

Header set Access-Control-Allow-Origin "*"
4
Sireesh Yarlagadda

si vous utilisez google chrome comme navigateur, vous pouvez ajouter une extension CORS et l’activer, cela résoudra le problème du trou sans avoir à modifier votre code.

3
Meriam

Non liée à cette question particulière, mais à quiconque utilise jQuery dans cette situation ... Cette erreur se produit également si vous essayez de créer une requête JSONP à l'aide de jQuery et omettez le paramètre de rappel magique: callback=?

2
danwellman

Si vous êtes de Java arrière-plan, une solution pourrait consister à créer un servlet qui appelle les services Web pour votre javascript. quelque chose comme le code ci-dessous dans la méthode GET (Your-choice) ...

JsonElement jelement;
    JsonArray jarray;
    try {
        URL url = new URL("http://rest."YOUR URL"#ba0482");
        URLConnection connection = url.openConnection();
        connection.setDoInput(true);
        InputStream inStream = connection.getInputStream();
        BufferedReader input = new BufferedReader(new InputStreamReader(inStream));

        jelement = new JsonParser().parse(input);

        jarray = jelement.getAsJsonArray();

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(jarray);
        out.flush();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Maintenant, dans le javascript, spécifiez simplement l'URL comme nom de servlet!

2
Saty

Je rencontre le même message d'erreur lorsque j'utilise ajax pour accéder à une page php (javascript et fichier php sont tous deux situés sur le même serveur).

La raison était que j'ai spécifié l'adresse IP en tant que domaine dans mon code JavaScript. Cela a fait croire au navigateur que l’appel au fichier php se faisait sur un autre serveur.

Donc, une solution facile pour se débarrasser de ce message d'erreur. a) vérifiez que javascript et le fichier php sont sur le même serveur b) assurez-vous que l'URL (en particulier le domaine) dans votre JavaScript (par exemple http://www.smartana.co.uk/ myJavaScript.js ) ajax correspond à l'URL de votre serveur (par exemple http://www.smartana.co.uk/myServer.php ).

0
Wolfi