web-dev-qa-db-ja.com

CORSポリシーによってXMLHttpRequestへのアクセスがブロックされました

angular 7 WebアプリケーションでPATCHリクエストを実行しようとすると、問題が発生します。バックエンドで次のようにしています。

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();
});

私のフロントエンドサービスでは、次のことを行いました。

  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());
  };

エラーは：

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.

何ができますか？ありがとう。

angularcorsangular7
12
RikG93

しばらく前に同じ問題に遭遇しました。以下のコードはバックエンドで私のために働いた。バックエンドはエクスプレス、ノードで書かれました。

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();
});
0
Sambhaji Mane

これをノードで使用します

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();
});

そしてangularでリクエストは

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