Discussion :

[a.brice]

salut svp je suis entrain de devloppez une application en angular et node js mais lorsque je lance ma requete angular pour attaquer le server nodejs j'ai cette erreur sur le navigateur


voici mon code angular :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {HttpClient, HttpResponse, HttpHeaders} from '@angular/common/http';
 
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};
 
 
 
@Component({
  selector: 'app-register-cmp',
  templateUrl: './register-cmp.component.html',
  styleUrls: ['./register-cmp.component.css']
})
 
export class RegisterCmpComponent implements OnInit {
 
    active:boolean=true;
 
  userObj:any;
  formGroup: FormGroup;
  email:string = '';
  name:string = '';
  password:string = '';
  surname:string = '';
  post:any;             //A Property for our submitted form
  titleAlert:string ='';
 
 
  constructor(private fb: FormBuilder, private http: HttpClient) { 
 
    this.formGroup = fb.group({
      'email':[null, Validators.compose([Validators.required, Validators.email])],
      'surname':[null, Validators.compose([Validators.required, Validators.minLength(3)])],
      'name':[null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(20)])],
      'password':[null, Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(30)])],
      'validate' : ''
    });
 
 
  }
 
 
  ngOnInit() {
    this.formGroup.get('validate').valueChanges.subscribe(
      (validate)=>{
        if(validate == '1'){
 
          this.formGroup.get('name').setValidators([Validators.required, Validators.minLength(2), Validators.maxLength(20)]);
          this.formGroup.get('surname').setValidators([Validators.required, Validators.minLength(3)]);
          this.formGroup.get('email').setValidators([Validators.required, Validators.email]);
        }
        this.formGroup.get('name').updateValueAndValidity();
        this.formGroup.get('surname').updateValueAndValidity();
        this.formGroup.get('email').updateValueAndValidity();
      }
 
    );
  }
 
  addPost(f){
    this.userObj =[{
      "name": f.name,
      "email": f.email,
      "surname": f.surname,
      "password": f.password
    }]
    this.http.post(`http://localhost:3000/add/`, this.userObj,httpOptions).subscribe((res:Response) => {
      console.log(res);
    })
 
  }

et voici mon code node js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
const restify =  require('restify');
const mongoose = require('mongoose');
 
mongoose.connect('mongodb://localhost:27017/test')
        .then(_ => {
    const  server = restify.createServer({
        name: 'my-rest-api',
        version: '1.1.',
        ignoreTrailingSlash: true
    })
 
    server.use(restify.plugins.bodyParser());
    server.use(
        function crossOrigin(req,res,next){ 
        res.header("Access-Control-Allow-Origin", "*"); 
        res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
        return next(); 
        } 
    );
 
    const userSchema = new mongoose.Schema({
        name:{
            type:String,
            required:true
        },
       surname:{
            type:String,
        },
        email:{
            type:String,
            required:true
        },
        password:{
            type:String,
            required:true
        }
    },{collection: 'users'});
 
     var User = mongoose.model('user', userSchema);
 
    server.get('/users',(req,resp, next)=>{
        User.find().then(users=>{
        resp.json(users);
        return next();
    });
});
 
server.post('/login', (req,resp,next)=>{
 
    User.findOne(req.body).then(user=>{
        if(user){
            resp.json(user);
        }else{
            resp.status(404)
            resp.json({message:'not found this user'})
        }
 
        return next()
    })
})
 
 
    server.post('/add', (req, resp, next) => {
        let user = new User(req.body)
        user.save().then(user=>{
            resp.json(user)
        }).catch(error=>{
            resp.status(400)
            resp.json({message:error.message})
        })
 
    })
 
 
 
server.listen(3000, ()=>{
    console.log('api listening on 3000');
})
 
}).catch(console.error)

en node js j'utilise restify js

merci pour votre aide

[psychadelic]

cross-origin-request => C.O.R. s. => https://developer.mozilla.org/fr/docs/Web/HTTP/CORS

ou
http://lmgtfy.com/?q=cross+origin+request

[a.brice]

merci mais ca ne m'aide pas trop j'ai compris deja l'origine de mon probleme c'est resourdre qui est difficile car si tu regarde dans mon code node tu va voir que j'ai fait allusion au CORS mais ca ne donne pas toujours.
.....

[psychadelic]

le principe des pages internet c'est de récupérer les info pour afficher ses que que depuis un seul serveur.
C'est une limitation normale et logique pour assurer la sécurité des internautes.

Si ta page récupère des infos en provenance de plusieurs serveur différents alors le navigateur te bloque avec ce message de "cross origine" ou Origines Croisées" en Français.

[a.brice]

Merci mais en observe bien je ne suis plus sur que mon probleme est au niveau des cross-origin car en observant je me rend compte au niveau du navigateur c'est un warning apres il y'a une erreur

je ne sais pas si c'est ce warning qui engendre l'erreur mais je pense que on doit bien regardez l'erreur

parce que je voit j'ai fait des recherches avec les liens que tu m'a envoye et j'ai ameliore les code node avec l'installation des CORS mais elas! meme erreur