web-dev-qa-db-fra.com

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée - application ionic 2

Je reçois le message d'erreur suivant lorsque j'essaie d'accéder à mon serveur local avec une demande POST:

XMLHttpRequest ne peut pas charger http://127.0.0.1:8000/api/v1/users/login . Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 8100 ' n'est donc pas autorisé à accéder.

Mon serveur autorise CORS car je l’ai testé en envoyant la demande à postman et cela fonctionne.

Voici mon code dans le front-end:

private headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
    'Access-Control-Allow-Credentials': true 
});


postLogin(data) {
    console.log(data);
    return new Promise((resolve) => {
        this.http.post(this.api + "users/login", data, {headers: this.headers})
            .map(res => res.json())
            .subscribe(answer => {
                 this.loggedIn = true;
                 this.token = answer.token;
                 resolve(answer);
            });
    });
 }

PS: je n'ai pas eu cette erreur avec une requête GET.

J'ai essayé de mettre un proxy et ça ne change rien :(

C'est mon ionic.config.json:

{
  "name": "hardShop",
  "app_id": "",
  "v2": true,
  "TypeScript": true,
  "proxies": [
      {
          "path": "/api",
          "proxyUrl": "http://127.0.0.1:8000"
      }
  ]
}
angularhttptypescriptionic-frameworkcors
9
Mohamed BOUKHLIF

Réessayez en utilisant ce plugin dans votre navigateur.

Il vous permet de demander n'importe quelle adresse de n'importe quelle source en contournant les exigences de sécurité de http/https ou d'autres limitations définies par les navigateurs (connu sous le nom CORS ). En pratique, il injecte l'en-tête 'Access-Control-Allow-Origin': '*' dans la réponse reçue avant il est transmis à votre application.

N'oubliez pas qu'il s'agit d'une solution de type pansement, principalement destinée au développement. Votre réponse (du serveur} _ doit réellement avoir l'en-tête 'Access-Control-Allow-Origin': '*', de préférence avec une valeur plus spécifique que *.

Ce que vous faites maintenant n'a pratiquement aucun effet, puisque vous en tant que client envoyez une demande avec cet en-tête au serveur, qui l'ignore rapidement. Ce qui compte, c’est que le serveur ait cet en-tête dans sa réponse à votre client.

Postman n'applique pas la SCRO pour autant que je sache, alors c'est peut-être pourquoi il n'est pas affecté.

15
maninak

Cette erreur apparaît lorsque vous connectez un Http avec un https c'est-à-dire une couche sécurisée . avec Https à mon application s'exécutant dans localhost.

Pour permettre cela, vous devez installer un plugin dans votre navigateur, ce qui passerait par ce verrou.

Si vous utilisez chrome, installez CORS plug-in pour chrome et cela fonctionnera.

1
JEET ADHIKARI

Une des raisons de ce problème peut être (expérience personnelle): Peut-être avez-vous déployé la mauvaise variable connectionstring pour database.

J'utilisais les deux connexions de base de données suivantes, une pour le stockage local et l'autre pour le stockage sur serveur

const localhost = await mongoose.connect('mongodb://localhost:27017/categories');
const serverhost = await mongoose.connect('mongodb://usename:[email protected]:12345/myapp');

certains utilisent peut-être deux connectionStrings comme moi et deploy le localhost database-connection au lieu du réel server database-connection, puis tentent d'accéder à la database via postman ou client-application pour ensuite faire face à ce problème.

Soyez sûr que vous avez deployed le droit connectionstring.

0
WasiF