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

Si vous utilisez express, vous pouvez utiliser le middleware cors comme suit :

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

app.use(cors())

Answer 2

J'ai été confronté à un problème lors de l'appel d'une ressource d'origine croisée en utilisant ajax à partir de chrome.

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

J'ai obtenu une réponse d'erreur lorsque j'ai accédé à une ressource d'origine croisée.

J'ai trouvé une solution à ce problème,

1) J'ai ajouté le code suivant à mon fichier app.js

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

2) Dans ma page html appelée cross origin resource utilisant $.getJSON();

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

Answer 3

Ajoutez ceci à vos importations de NodeJS Server ci-dessous :

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

Answer 4

Si vous obtenez 403 après cela, veuillez réduire les filtres dans la configuration WEB.XML de tomcat à ce qui suit :

<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>

Answer 5

Si quelqu'un cherche la solution, si vous utilisez express, voici la solution rapide.

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

1) installer cors en utilisant npm npm install cors --save

2) l'importer [require ] const cors = require('cors')

3) l'utiliser comme intergiciel app.use(cors())

pour plus de détails insatll et utilisation des cors . C'est tout, j'espère que cela fonctionne.