obtenir l'erreur dans le routage de angular2 à nodejs demande de contrôle en amont ne passe pas contrôle d'accès vérifier: Non 'Access-Control-Allow-Origin'

Question

J'essaie d'accéder à une API de nodejs en utilisant angulaire 2. Mais je reçois cette étrange erreur que je n'ai pas pu résoudre même après avoir passé quelques heures dessus. Je suis fondamentalement nouveau pour signifier pile.

Mon service angulaire 2 -

import {Injectable} from '@angular/core'; 
import {Http, Response, Headers, RequestOptions, RequestMethod} from "@angular/http"; 
import {Observable} from "rxjs/Rx"; 

@Injectable() 
export class LoginService { 

constructor(private http:Http) { } 
    // Uses Observable.forkJoin() to run multiple concurrent http.get() requests. 
    // The entire operation will result in an error state if any single request fails. 
    createUser(user) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    headers.append('Content-Type', 'application/json'); 
    headers.append('Accept', 'application/json'); 

    headers.append('Access-Control-Allow-Origin', '*'); 
    //headers.append('Access-Control-Allow-Credentials', 'true'); 

    // headers.append('Access-Control-Request-Method',"'GET', 'POST', 'OPTIONS'"); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(user); 

    alert(body); 
    return this.http.get('http://localhost:8080/api/user/signup', options); 
    //return this.http.post('http://localhost:8080/api/user/signup', body, options); 
    //alert (response) ; 
    //return response; 
    } 
    validateUser(user) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(user); 
    console.log('Request : '+body); 
    return this.http.post('localhost:8080/api/user/signup/', body, options).map((res: Response) => res.json()); 
    } 
} 

Mon NodeJS api -

usseRouter.post('/signup', function(req, res) { 
    console.log(req.body + " data " + req.body.username) 

//res.header('Access-Control-Allow-Origin', '*'); 
//res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
if (!req.body.username || !req.body.password || !req.body.email) { 
    console.log(req.body + " data " + req.body.username) 
    res.json({success: false, msg: 'Please pass username ,password and email.'}); 
} else { 
    console.log(req.body + " data " + req.body.username) 

    var newUser = new User({ 
    username: req.body.username, 
    password: req.body.password, 
    email : req.body.email 
    }); 
    // save the user 
    newUser.save(function(err) { 
    if (err) { 
     return res.json({success: false, msg: 'Username already exists.'}); 
    } 
    res.json({success: true, msg: 'Successful created new user.'}); 
    }); 
} 
}); 

Le noeud api fonctionne bien dans postier mais donnant erreur lorsque vous essayez de vous connecter via angulaire 2. Erreur:

Failed to load http://localhost:8080/api/user/signup: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

Answer 1

Vous devez définir l'en-tête dans votre réponse à partir du serveur pas dans la demande dans le client. Vous pouvez définir un en-tête dans l'objet res côté serveur . Juste comme ceci:

usseRouter.post('/signup', function(req, res) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    ... 
    newUser.save(function(err) { 
     if (err) { 
      return res.json({success: false, msg: 'Username already exists.'}); 
     } 
     res.json({success: true, msg: 'Successful created new user.'}); 
    }); 

Faites-moi savoir si cela fonctionne pour vous.