web-dev-qa-db-ja.com

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません-ionic 2 application

POSTリクエストでローカルサーバーにアクセスしようとすると、次のエラーが表示されます。

XMLHttpRequestをロードできません http://127.0.0.1:8000/api/v1/users/login 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http：// localhost：81 'はアクセスを許可されていません。

私のサーバーはCORSを許可しています。なぜなら、私はpostmanでリクエストを送信してテストし、動作しているからです。

フロントエンドのコードは次のとおりです。

private headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
    'Access-Control-Allow-Credentials': true 
});


postLogin(data) {
    console.log(data);
    return new Promise((resolve) => {
        this.http.post(this.api + "users/login", data, {headers: this.headers})
            .map(res => res.json())
            .subscribe(answer => {
                 this.loggedIn = true;
                 this.token = answer.token;
                 resolve(answer);
            });
    });
 }

PS：GETリクエストでこのエラーは発生しませんでした。

私はプロキシを配置しようとしましたが、何も変わりません:(

これは私の ionic.config.json：

{
  "name": "hardShop",
  "app_id": "",
  "v2": true,
  "TypeScript": true,
  "proxies": [
      {
          "path": "/api",
          "proxyUrl": "http://127.0.0.1:8000"
      }
  ]
}
angularhttptypescriptionic-frameworkcors
10
bondif

ブラウザで このプラグイン を使用して再試行してください。

これにより、http/httpsのセキュリティ要件またはブラウザーで設定されたその他の制限（ [〜＃〜] cors [〜＃〜] ）をバイパスして、任意のソースから任意のアドレスをリクエストすることができます。実際には、受信した応答に'Access-Control-Allow-Origin': '*'ヘッダーを挿入しますbeforeそれはアプリに渡されます。

これは、主に開発用のバンドエイドソリューションであることに注意してください。 server'sレスポンスには、実際には'Access-Control-Allow-Origin': '*'ヘッダーが必要です。できれば*よりも具体的な値を使用してください。

クライアントとしてがそのヘッダーでリクエストを送信しているため、あなたが今していることは実質的に効果がありませんサーバーへ、その後すぐにそれを無視します。重要なのは、サーバーがこのヘッダーを持っていることですクライアントへの彼の応答で。

Postmanは私の知る限りCORSを適用しないので、おそらくそれが影響を受けないのかもしれません。

16
maninak

このエラーは、Httpをhttpsに接続している場合、つまり保護されたレイヤーに接続している場合に表示されます。 localhostで実行中のアプリケーションにHttpsを使用して、セキュリティで保護されたサーバーにあるレストサービスを呼び出しているときに、同じエラーが発生しました。

それを可能にするには、ブラウザでプラグインをインストールする必要があります。これにより、このロックが渡されます。

クロムを使用している場合は、[〜＃〜] cors [〜＃〜] plugin for chromeをインストールすると動作します。

1
JEET ADHIKARI