現在、Adam Freeman による「Pro AngularJS」を読んでいます。例を見ていく中で、彼は読者に Angular (もちろん) を使用して Deployed サーバー リソースを使用してスポーツ ストア アプリを作成してもらいます。デプロイされたリソースは、モデルに入力される JSON データを返すように設定されています。NodeJS を使用してサーバーを実行しています。現在、ポート 5000 ( http://localhost:5000/sportsstore/app.html) にセットアップされています。デプロイされたリソースはポート 5500 ( http://localhost:5500/products) で実行されています。Deployd を押すと、次のような応答が返されます。
[
{ "name": "Kayak", "description": "A boat for one person", "category": "Watersports", "price": 275, "id": "a1c999fc248b2959" },
{ "name": "Lifejacket", "description": "Protective and fashionable", "category": "Watersports", "price": 48.95, "id": "61303717cfad182e" },
{ "name": "Soccer Ball", "description": "FIFA-approved size and weight", "category": "Soccer", "price": 19.5, "id": "0fb5f67bdcbd992f" },
{ "name": "Corner Flags", "description": "Give your playing field a professional touch", "category": "Soccer", "price": 34.95, "id": "24385d315dd388b4" },
{ "name": "Stadium", "description": "Flat-packed 35,000-seat stadium", "category": "Soccer", "price": 79500, "id": "500fb6805905a856" },
{ "name": "Thinking Cap", "description": "Improve your brain efficiency by 75%", "category": "Chess", "price": 16, "id": "637d8a1f42e6fa1c" },
{ "name": "Unsteady Chair", "description": "Secretly give your opponent a disadvantage", "category": "Chess", "price": 29.95, "id": "73393312ec7dfab7" },
{ "name": "Human Chess Board", "description": "A fun game for the family", "category": "Chess", "price": 75, "id": "7871d02a662b0915" },
{ "name": "Bling-Bling King", "description": "Gold plated, diamon-studded King", "category": "Chess", "price": 1200, "id": "b59a3389a0e248bd" }
]
を使用してこのデータを取得しようとしています$http.get:
$http.get("http://localhost:5500/products")
.success(function (data) { ... })
.error(function (error) { ... });
ただし、これはエラーを返し続けます。
XMLHttpRequest cannot load http://localhost:5500/products. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.
調査によると、Angular と CORS にはいくつかの問題があり、クロスドメイン リクエストを実行するようにヘッダーを構成する必要がありました。その結果、app.config に以下を追加しました。
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With']; // this isn't needed anymore, but was put here as a just-in-case
これらの設定を追加しても、まだエラーが発生します。デプロイされたドキュメントによると、CORS ( Cross-Origin Requests ) 用に自動的に構成され、リクエストに無効なカスタム ヘッダーが含まれていない限り、適切なヘッダー情報が送信されます。リクエストに無効なカスタム ヘッダーが含まれていないことは確かです。
Accept: application/json, text/plain, */*
Cache-Control: max-age=0
Origin: http://localhost:5000
Referer: http://localhost:5000/sportsstore/app.html
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36
私の質問: CORS 要求を処理できるように Deployd を構成するために、他に必要な構成はありますか? この本では、特別な Angular ヘッダー設定などは指定されていません。