web-dev-qa-db-ja.com

回避策：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

自分の管理下にないRESTfulサーバーを処理する必要があります。 ID 1レコードをそこからフェッチしようとすると、次のエラーが発生します。

XMLHttpRequest cannot load http://www.example.com/api/v1/companies/1.
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4200' is therefore not allowed 
access.

シェルでcurlできます：

$ curl -I http://www.company.com/api/v1/companies/1
HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 11055
Content-Type: application/javascript
Last-Modified: Thu, 18 Jun 2015 07:30:26 GMT
Accept-Ranges: bytes
ETag: "5e772a598a9d01:0"
P3P: policyref="/w3c/p3p.xml",CP="CAO DSP LAW CURa ADMa DEVa CUSi OUR LEG UNI"
Date: Fri, 19 Jun 2015 13:06:46 GMT
$

私は次のcontentSecurityPolicyを使用しています。

contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self'",
  'font-src': "'self'",
  'connect-src': "'self' http://www.example.com",
  'img-src': "'self'",
  'style-src': "'self'",
  'media-src': "'self'"
}

どうすればこれを修正できますか？ Emberだけを使用するように指示するにはどうすればよいですか？

ember.jsember-data
9
wintermeyer

contentSecurityPolicyを設定すると、ブラウザは実際に_http://localhost:4200_から_http://www.example.com_にリクエストを送信できます。

このセットがない場合は、次のようなエラーが表示されます。

[レポートのみ]次のコンテンツセキュリティポリシーディレクティブに違反しているため、 ' http://www.example.com/ 'への接続を拒否しました： "connect-src'self ' http： // localhost ：* ws：// localhost：* ws：// localhost：35729 ws：//0.0.0.0：35729 "。

リクエストを実行した後、_http://www.example.com_に実際に_http://localhost:4200_がこれらのリクエストを実行できるようにする特定のヘッダーが含まれていない場合、ブラウザはエラーをスローします。

詳細については、この質問を参照してください： Access-Control-Allow-Originヘッダーはどのように機能しますか？

開発にEmber CLIを使用している場合は、以下を使用してすべてのajaxリクエストを_http://www.example.com/_にプロキシできます。

_ember server --proxy http://www.example.com/
_

しかし、これは本番環境に移行する際の問題を解決しません。そのためには他の解決策が必要になります。

5
jmurphyau

これは古いスレッドかもしれませんが、この回答は将来これを参照する人に役立つかもしれません。アクセスするRESTfulメソッドで@CrossOriginアノテーションを使用してみてください。例：

@CrossOrigin(origins = "http://localhost:4200")
1
Mohamed Malhar