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

Question

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

J'ai lu des articles sur les requêtes ajax inter-domaines, et je comprends le problème de sécurité sous-jacent. Dans mon cas, deux serveurs fonctionnent localement, et j'aimerais activer les requêtes interdomaines pendant les tests.

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

J'envoie une requête ajax à localhost:8080 - GAE server pendant que ma page est chargée depuis le serveur du noeud. Quelle est la solution la plus simple et la plus sûre (je ne veux pas démarrer chrome avec un système de gestion de l'information) ? disable-web-security option). Si je dois changer 'Content-Type' dois-je le faire au niveau du serveur de nœuds ? Comment ?

Answer 1

Puisqu'ils sont exécutés sur des ports différents, ce sont des JavaScript différents. origin . Le fait qu'ils soient sur la même machine/le même nom d'hôte n'a aucune importance.

Vous devez activer CORS sur le serveur (localhost:8080). Consultez ce site : http://enable-cors.org/

Il suffit d'ajouter un en-tête HTTP au serveur :

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

Ou, pour simplifier :

Access-Control-Allow-Origin: *

Vous n'utilisez pas "*" si votre serveur essaie de définir un cookie et vous utilisez withCredentials = true

lorsqu'il répond à une demande d'accréditation, le serveur doit spécifier un domaine et ne peut pas utiliser de caractères génériques.

Vous pouvez en savoir plus sur withCredentials aquí

Answer 2

Si vous avez besoin d'un contournement rapide des requêtes ajax dans Chrome, ce plugin vous permet d'accéder automatiquement à n'importe quel site depuis n'importe quelle source en ajoutant l'en-tête de réponse approprié.

Extension Chrome Allow-Control-Allow-Origin : *

Answer 3

Vous devez activer CORS pour résoudre ce problème

si votre application est créée avec un simple node.js

le définir 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 le framework express

utiliser un middleware CORS 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 postulez via

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

Voici deux liens de référence

1. comment-autoriser-les-cors-dans-express-nodejs
2. plongée-into-node-js-très-première-application #voir la section Ajax

Answer 4

Dans router.js il suffit d'ajouter du code avant d'appeler les méthodes get/post. Cela 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();
  });

Answer 5

J'accepte la réponse de @Rocket hazmat car elle m'a conduit à la solution. C'est en effet sur le serveur GAE que je devais définir l'en-tête. Je devais définir les éléments suivants

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

réglage uniquement "Access-Control-Allow-Origin" a donné une erreur

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

De plus, si le jeton d'authentification doit être envoyé, ajoutez ceci aussi

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

De même, chez le client, définissez withCredentials

cela provoque l'envoi de 2 requêtes au serveur, une avec OPTIONS . Le cookie d'authentification n'est pas envoyé avec, d'où la nécessité de le traiter en dehors de l'authentification.