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

J'ai finalement obtenu la réponse pour apache Tomcat8

Vous devez modifier le fichier web.xml de Tomcat.

Il est probable qu'il se trouve dans le dossier webapps,

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

le trouver et l'éditer

<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 d'autoriser tous les hôtes. Si vous voulez passer de tous les hôtes à votre seul hôte, vous pouvez modifier le paramètre

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

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

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

Merci

Answer 2

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

ajoutez ceci à vos routes que vous appelez depuis le front-end. Ex- si vous appelez pour http://localhost:3000/users/register vous devez ajouter ce fragment de code dans le fichier .js de votre back-end où se trouve cette route.

Answer 3

Pour PHP, utilisez cette option 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");

Answer 4

Salut C'est la façon de résoudre le problème CORS dans node Il suffit d'ajouter ces lignes sur le serveur côté "api" dans Node.js (ou quel que soit votre fichier serveur), Avant cela, assurez-vous d'installer "cors".

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

Answer 5

Si votre serveur est server=express() ajoutez simplement server.use(cors()) à la ligne suivante. Par exemple :

server.js

const express = require('express')
const cors = require('cors')
server=express()
server.use(cors())

server.get('/',(req,res)=>{
    res.send({"name":"aakash","name2":"aakash4dev"})
})
server.listen(3000)

index.html

<script>
    fetch('http://localhost:3005/')
  .then(res=> res.json())
  .then(data => console.log(data))
</script>