0

2 つの別個のコンポーネントを持つ WebApp を構築しています。

  1. Web 訪問者がアクセスする「フロントエンド」node.js アプリケーション サーバー (localhost:3099 で実行)
  2. ORM を管理し、データベースと対話する「バックエンド」Django サーバー (localhost:3098 で実行)。Web 訪問者がこのサーバーと直接対話することはまったくありません。このサーバーは、フロントエンドで使用される RESTful API を発行するだけです。

フロントエンド サーバー以外がバックエンドの API にアクセスできないようにするセキュリティ制限を実装します。

バックエンドが発行する API エンドポイントの 1 つは、次のようになりますhttp://localhost:3098/api/myApi/。

次のように、curl からその API を正常にヒットできます。curl -X POST -H "Content-Type: application/json" -d '{"myKey1":"myVal1", "myKey2":"myVal2"}' http://localhost:3098/api/myApi/

しかし、Javascript を使用してフロントエンド サーバーから同じ API をヒットしようとすると、ブラウザーのコンソール ウィンドウに次のエラーが表示されます。

XMLHttpRequest cannot load http://localhost:3098/api/myApi/. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3099' is therefore not allowed access.

これを解決するために、次の手順を実行しました。

  1. django-cors-headersをインストールしました
  2. 私'corsheaders'は私のINSTALLED_APPS
  3. 上に追記'corsheaders.middleware.CorsMiddleware'しましたMIDDLEWARE_CLASSES'django.middleware.common.CommonMiddleware'
  4. ホワイトリストを宣言しました：CORS_ORIGIN_WHITELIST = ('localhost', '127.0.0.1',)

ただし、django-cors-headers を実装しても違いはないようです。同じ CORS エラーが引き続き発生します。この問題を解決するにはどうすればよいですか?

4

1 に答える 1

1

CORS はポート センシティブです。仕様はそれを言う

If there is no port component of the URI:
1.  Let uri-port be the default port for the protocol given by uri-scheme.
Otherwise:
2.  Let uri-port be the port component of the URI.

と

2 つのオリジンがスキーム/ホスト/ポートのトリプルである場合、2 つのオリジンが同一であるのは、スキーム、ホスト、およびポートが同一である場合のみです。

これは、あなたの仕様では、CORS がホワイトリストを として処理することを意味しますlocalhost:80, 127.0.0.1:80。指定するlocalhost:3099ことでこの問題は解決すると思います。

于 2014-09-08T04:46:05.503 に答える