Origine <origine> n'est pas autorisé par Access-Control-Allow-Origin

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

J'ai lu sur la croix domaine des requêtes ajax, et de comprendre les sous-jacents au problème de sécurité. Dans mon cas, les 2 serveurs sont exécutés localement, et de permettre la croix de domaine de demandes au cours de l'essai.

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

Je lance une requête ajax localhost:8080 - GAE server alors que ma page est chargé à partir du nœud de serveur. Quelle est la méthode la plus simple et la plus sûre ( Ne voulons pas commencer à google chrome avec disable-web-security option). Si je dois changer de 'Content-Type', dois-je le faire au niveau du nœud de serveur? Comment?

InformationsquelleAutor bsr | 2013-09-05
  1. 157

    Depuis qu'ils sont en cours d'exécution sur des ports différents, ils sont différents JavaScript origin. Il n'importe pas qu'ils sont sur la même machine/nom d'hôte.

    Vous devez activer la SCRO sur le serveur (localhost:8080). Découvrez ce site: http://enable-cors.org/

    Tout ce que vous devez faire est d'ajouter un en-tête HTTP pour le serveur:

    Access-Control-Allow-Origin: http://localhost:3000

    Ou, pour plus de simplicité:

    Access-Control-Allow-Origin: *
    • si nous voulons ajouter cet en-tête dans une page HTML alors que doit-on faire pour elle?
    • Utiliser un .fichier htaccess. stackoverflow.com/q/10640596 🙂
    • Je ne pense pas que ce port était nécessaire, mais si vous utilisez un port non standard comme 3000 vous devez l'inclure dans le CORS de la politique.
    • Notez qu'à partir de tests nous venons de faire à mon bureau, toutes les pièces de cet en-tête sont nécessaires: localhost n'est pas assez sur son propre, et comme Michael l'a souligné, le port est obligatoire si vous n'êtes pas à l'aide d'un port standard.
    • Merci pour cette réponse. Veux juste mettre en évidence les implications sur la sécurité de l'utilisation de '*' comme valeur ici. Cela permet à toutes les origines: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/... Semble être le premier exemple serait le mieux en termes de moins accès. Les détails sur la façon de faire cela avec plusieurs domaines ici: stackoverflow.com/a/1850482/1566623
    • Pour plus de clarté, quand il est dit que vous devez "ajouter un en-tête HTTP pour le serveur", cela signifie que la donnée Access-Control-Allow-Origin en-tête doit être ajouté à l'entête HTTP réponses que le serveur envoie. Cet en-tête doit être une partie de la réponse du serveur, il n'a pas besoin d'être partie de la demande du client. Plus précisément ce qui se passe avant que le client fait la demande réelle que vous voulez, le navigateur envoie une OPTIONS demande avant elle, et si la réponse du serveur pour que OPTIONS requête ne doit pas contenir l'en-tête, le navigateur n'enverra pas votre demande.
    • Il est important de lire les conseils pour votre serveur d'arrière-plan à enable-cors.org.
    • Quels sont les risques en permettant à chacun l'accès à l'aide Access-Control-Allow-Origin: *?

    InformationsquelleAutor Rocket Hazmat
  2. 53

    Si vous avez besoin d'un travail rapide autour dans Chrome pour les requêtes ajax, ce plugin chrome automatiquement vous permet d'accéder à un site à partir de n'importe quelle source en ajoutant le bon en-tête de réponse

    Extension Chrome Permettent-Control-Allow-Origin: *

    • Je ne sais pas pourquoi vous n'obtenez pas plus upvotes. C'est la moins intrusive pour le développement sur localhost avec google Chrome.
    • certainement d'accord. Facile à activer pour localhost dev sur un serveur distant sans avoir à changer la config pour le serveur distant.
    • considérant que vous vérifiez l'extension et à la confiance en elle, bien sûr 😉
    • CE DOIT ÊTRE LA PREMIÈRE RÉPONSE! Surtout lorsque localhost est concerné.
    • Ce doit être le top de réponse ! Il a travaillé avec un seul clic. Si vous êtes en développement certains app sur Localhost, d'UTILISER CETTE!
    • Si c'était une bonne solution, de la SCRO n'aurait pas été inventé en premier lieu. L'application de cette en-tête de n'importe quel hôte désactiver la SCRO protection et vous expose à des scripts malveillants, pas seulement le vôtre. Ne soyez pas surpris si votre compte bancaire est soudainement vide.

    InformationsquelleAutor Billy Baker
  3. 45

    Vous devez activer la SCRO pour résoudre ce

    si votre application est créée avec de simples node.js

    mettre dans vos en-têtes de réponse comme

    var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

    si votre application est créée avec cadre express

    utiliser un SCRO middleware comme

    var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

    et de les appliquer via

    app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});

    Voici deux liens de référence

    1. comment permettent-scro-en-express-nodejs
    2. plongée-en-node-js-très-premier-app #voir l'Ajax section
    • pouvez-vous précisez comment utiliser config.allowedDomains . dire que dans mon cas, ce qui uri dois-je y mettre?
    • btw, j'ai utiliser express
    • vous pouvez utiliser * ou la specific domain vous voulez accorder l'accès.
    • alors, suis-je le seul à recevoir app.configure() n'est pas une erreur de fonction?
    • Je ne comprend pas le "app.configurer" partie seulement des "app.utilisation(allowCrossDomain)", et il a travaillé pour moi.
    InformationsquelleAutor mithunsatheesh
  4. 7

    J'accepte @Rocket hazmat de la réponse qu'il me conduire à la solution. En effet, il était sur le GAE serveur, j'ai besoin de définir l'en-tête. J'ai dû mettre ces

    "Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

    paramètre uniquement "Access-Control-Allow-Origin" a donné d'erreur

    Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

    Aussi, si auth jeton doit être envoyé, ajouter ce trop

    "Access-Control-Allow-Credentials" -> "true"

    Aussi, au client, définir withCredentials

    cela provoque 2 demandes envoyées au serveur, l'un avec OPTIONS. Auth cookie n'est pas l'envoyer avec elle, donc de la nécessité de traiter à l'extérieur auth.

    InformationsquelleAutor bsr
  5. 3

    J'ai été confronté à un problème lors de l'appel de la croix-de l'origine des ressources à l'aide d'ajax de google chrome.

    J'ai utilisé node js et serveur http local pour déployer mon node js app.

    J'ai été prise en réponse à l'erreur, lorsque j'accède à la croix-de l'origine des ressources

    J'ai trouvé une solution sur ce ,

    1) j'ai ajouté ci-dessous le code de mon app.js fichier

    res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

    2) Dans ma page html appelée origine de la croix de la ressource à l'aide de $.getJSON();

    $.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});
    InformationsquelleAutor Chaitanya
  6. 3

    Si vous utilisez express, vous pouvez utiliser de la scro middleware comme suit:

    var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())
    InformationsquelleAutor Akalanka Weerasooriya
  7. 3

    Dans router.js ajoutez simplement le code avant d'appeler get/post méthodes. Il fonctionne pour moi sans erreurs.

    //Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

router.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
    InformationsquelleAutor Brahmmeswara Rao Palepu
  8. 2

    Si vous avez obtenu 403 après cela, veuillez réduire filtres WEB.XML tomcat config à la suivante: 

    <filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
    InformationsquelleAutor Farbod Aprin
  9. 1

    Ajouter à votre Serveur NodeJS ci-dessous les importations:

    app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
    InformationsquelleAutor Ryan Cocuzzo
  10. 1

    J'ai enfin eu la réponse pour apache Tomcat8

    Vous devez éditer le fichier tomcat web.xml fichier.

    probabily il sera à l'intérieur de répertoire webapps, 

    sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

    de le trouver et de le modifier

    <web-app>
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

    Cela permettra Access-Control-Allow-Origin tous les hôtes.
    Si vous avez besoin de changer tous les hôtes uniquement sur votre hôte, vous pouvez modifier la

    <param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

    code ci-dessus à partir de * à votre http://your_public_IP ou http://www.example.com

    vous pouvez consulter ici Tomcat filtre de la documentation

    Grâce

    InformationsquelleAutor Shinto Joseph
  11. 0

    utilisation dataType: 'jsonp', qui fonctionne pour moi. 

       async function get_ajax_data(){
var _reprojected_lat_lng = await $.ajax({
type: 'GET',
dataType: 'jsonp',
data: {},
url: _reprojection_url,
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
},
success: function (data) {
console.log(data);
//note: data is already json type, you just specify dataType: jsonp
return data;
}
});
} //function
    InformationsquelleAutor hoogw
  12. -3

    Si vous êtes dans Google Chrome, essayez d'installer cet add-on:

    https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

    • Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.
    InformationsquelleAutor Elkin Gutierrex