web-dev-qa-db-ja.com

「Access-Control-Allow-Origin」ヘッダーはありません。.angular 7 and express

ポート3000でExpressを使用するサーバーとポート4200でangular 7を使用するクライアントを実行しています。リクエストを送信すると、CORSの問題が発生します。

Origin ' http：// localhost：42 'から ' http：// localhost：3000/drug 'のXMLHttpRequestへのアクセスがCORSポリシーによってブロックされました：いいえ 'アクセス-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在します。

私はcorsパッケージを使用するようなすべてのソリューションをオンラインで試し、以下のコードのようにルーターの前にミドルウェアを設定しました（ Angular 6-要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません ） 。しかし、それでも解決されず、同じエラーが発生し続けます。 CORSがすべてのソリューションで解決されないという同じ問題がありますか？手伝っていただけませんか？

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header(
    "Access-Control-Allow-Header",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use((req, res, next) => {
      res.header("Access-Control-Allow-Origin", "http://localhost:4200");
      res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
      res.header(
        "Access-Control-Allow-Header",
        "Origin, X-Requested-With, Content-Type, Accept"
      );
      next();
    });
node.jsexpressangular7cross-origin-read-blocking
2
Anna Lee

コードをルーティングする前に、このコード行app.use(cors());を配置します。 （corsパッケージをインストールしたと仮定します）。

3
Nilay Patel

答えは遅すぎると思いますが、将来誰かのために：
サーバー側でオンにする必要があります。私は.Net開発者なので、.Netコアアプリの例を示します。スタートアップファイルメソッドConfigureServicesでは、次のコードを追加する必要があります

services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.WithOrigins("http://localhost:4200")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

その後、メソッドConfigureを編集する必要があります。 UseMvcを呼び出す前に次の行を追加

app.UseCors("CorsPolicy");

それで全部です。この答えが誰かのお役に立てば幸いです。

0
Dmitriy Bobrovskiy