L'accès à XMLHttpRequest a été bloqué par la stratégie CORS

Question

J'ai un problème lorsque j'essaie de faire une demande de PATCH dans une application Web angular 7. Dans mon backend, j'ai:

app.use((req, res, next) => {
    res.set({
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Headers": "'Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'",
    });

    next();
});

Dans mon service frontend, j'ai:

  patchEntity(ent: any, id) {
    let headers = new Headers({ 'Content-Type': '*' });
    let options = new RequestOptions({ headers: headers });
    return this.http.patch('my_url', ent).map((res: Response) => res.json());
  };

L'erreur est:

Access to XMLHttpRequest at 'my_url' from Origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Que puis-je faire? Merci.

Answer 1

J'ai rencontré le même problème il y a quelque temps. Le code ci-dessous a fonctionné pour moi au backend. Le backend a été écrit en noeud express.

app.use(function (request, response, next) {
  response.header("Access-Control-Allow-Origin", "*");
  response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 2

utiliser ceci dans Node

app.use(function (req, res, next) {
//Enabling CORS
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, 
Accept, x-client-key, x-client-token, x-client-secret, Authorization");
  next();
});

Et en angular la requête est

 auth(login): Promise<any> {
 return new Promise((resolve, reject) => {
   this._http.post('url:3000/api/auth/login', { ...login })
     .subscribe((response: any) => {
       resolve(response);
     });
 });
}