web-dev-qa-db-fra.com

Origine <Origine> n'est pas autorisée 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 des informations sur les requêtes ajax entre domaines et je comprends le problème de sécurité sous-jacent. Dans mon cas, 2 serveurs s'exécutent localement et souhaitent activer les requêtes interdomaines lors des tests.

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

J'émets une demande ajax à localhost:8080 - GAE server pendant que ma page est chargée à partir du serveur de noeud. Quel est le moyen le plus simple et le plus sûr (vous ne voulez pas démarrer chrome avec l'option disable-web-security). Si je dois changer 'Content-Type', devrais-je le faire sur le serveur de noeud? Comment?

javascriptnode.jsajaxgoogle-chromecors
114
bsr

Comme ils fonctionnent sur des ports différents, ils sont différents en JavaScript Origin. Peu importe qu'ils soient sur le même ordinateur/nom d'hôte.

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

Tout ce que vous avez à faire est d’ajouter un en-tête HTTP au serveur:

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

Ou, pour plus de simplicité:

Access-Control-Allow-Origin: *
129
Rocket Hazmat

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

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

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 un cadre 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 appliquer via

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

Voici deux liens de référence

  1. comment-autoriser-cors-in-express-nodejs
  2. plonger-dans-noeud-js-très-première-application #voir la section Ajax
42
mithunsatheesh

Si vous avez besoin d'une solution rapide dans Chrome pour les demandes ajax, ce plugin chrome vous permet automatiquement d'accéder à 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: *

41
Billy Baker

J'accepte la réponse de @Rocket Hazmat, car elle me conduit à la solution. C'était bien sur le serveur GAE qu'il me fallait définir l'en-tête. Je devais mettre ces

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

mettre seulement "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-le également

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

De plus, sur le client, définissez withCredentials

cela entraîne l'envoi de 2 demandes au serveur, l'une avec OPTIONS. Le cookie d'authentification n'est pas envoyé avec, il est donc nécessaire de traiter en dehors de l'authentification.

6
bsr

Je faisais face à un problème lors de l'appel de la ressource cross Origin en utilisant ajax à partir de chrome.

J'ai utilisé le noeud js et le serveur http local pour déployer mon application de noeud js.

J'obtenais une réponse d'erreur lorsque j'accède à une ressource cross-origin

J'ai trouvé une solution à ce sujet,

1) J'ai ajouté le code ci-dessous à 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 ressource croisée d’origine utilisant $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});
3
Chaitanya
In router.js just add code before calling get/post methods. It works for me without errors.

//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();
  });
2
Brahmmeswara Rao Palepu

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())
1
Akalanka Weerasooriya

Ajoutez ceci à votre serveur NodeJS au-dessous des 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();
});
1
Ryan Cocuzzo

Si vous obtenez 403 après cela, veuillez réduire les filtres de la configuration WEB.XML Tomcat aux éléments suivants: 

<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>
1
Farbod Aprin

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

Vous devez éditer le fichier web.xml de Tomcat.

il sera probablement dans le dossier webapps, 

Sudo gedit /opt/Tomcat/webapps/your_directory/WEB-INF/web.xml

trouvez-le et éditez-le

<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 autorisera tous les hôtes Access-Control-Allow-Origin . Si vous devez le modifier de tous les hôtes à votre hôte uniquement, vous pouvez

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

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

vous pouvez vous référer ici Documentation sur les filtres Tomcat

Merci

1
Shinto Joseph

utilisez dataType: 'jsonp', 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
0
hoogw

Pour PHP, utilisez ceci pour définir les en-têtes.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
0
Hamza Waleed