web-dev-qa-db-fra.com

Problème d'origine lié au contrôle d'accès dans Angular 2

J'ai un problème avec l'obtention des données de mon serveur node.js.

Le côté client est:

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

côté serveur je mets aussi les en-têtes:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

Mais je reçois une erreur

"XMLHttpRequest ne peut pas charger http: // localhost: 3003/get_testlines . La réponse à la demande de contrôle en amont ne réussit pas le contrôle du contrôle d'accès: Non L'en-tête 'Access-Control-Allow-Origin-Origin' est présent sur la ressource demandée Origine ' http: // localhost: 3000 ' n’est donc pas autorisée accès. "

Comment puis-je le réparer? Lorsque je supprime les en-têtes, il est indiqué que cet en-tête est obligatoire. 

htmlangularhttp-headers
8
Michal Bialek

Access-Control-Allow-Origin est un en-tête response , pas un en-tête de requête.

Vous devez le faire apparaître sur la réponse, pas sur la demande.

Vous avez essayé de le mettre sur la réponse:

resp.setHeader('Access-Control-Allow-Origin','*')

… Mais ça n'a pas marché.

C'est probablement parce que vous ne l'avez pas mis sur la réponse à la bonne demande. Le message d'erreur dit:

Réponse à demande de preflight ne réussit pas la vérification du contrôle d'accès

Vous avez fait quelque chose pour faire la demande en amont. Cela signifie qu'avant de faire la demande GET que vous essayez de faire, le navigateur fait une demande OPTIONS.

Ceci est vraisemblablement traité par un code différent sur votre serveur afin que la ligne resp.setHeader('Access-Control-Allow-Origin','*') ne soit pas touchée. 

L’ajout d’en-têtes de requête (à l’exception d’un petit nombre d’exceptions) est l’une des causes de la demande de contrôle en amont. L'ajout de Access-Control-Allow-Origin à la requête déclenchera une demande de contrôle en amont, donc la première chose à faire pour essayer de résoudre le problème est de supprimer Access-Control-Allow-Origin de la demande .

Si cela échoue, vous devez configurer votre serveur afin qu'il puisse répondre à la demande OPTIONS et à la demande GET.

8
Quentin

Access-Control-Allow-Origin est un en-tête response et non un en-tête request Vous devez corriger l'autorisation dans votre backend. vous devez donc créer un fichier cors.js contenant toutes les autorisations nécessaires.

function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}

module.exports= new crosPermission();

étape suivante Vous devez ajouter une ligne dans votre app.js

    var cors=require('./cors');
    app.use(cors.permission)
2
Bettaibi Nidhal

Ne définissez pas Access-Control-Allow-Origin sur la demande, il n’est jamais nécessaire. Vous devez vérifier si l'en-tête est présent dans la réponse (vérifiez-le dans la console du développeur). Il serait utile de partager davantage de code de base.

1
Mezo Istvan

Si cela doit rester API => http: // localhost: 3003/get_testlines

puis utilisez @CrossOrigin (origins = "*") pour résoudre le problème de domaine croisé

0
aabbcc