已部署 - 通过 AngularJS CORS 检索的数据 [英] Deployd - Data retrieved via AngularJS CORS
问题描述
我目前正在阅读 Adam Freeman 的Pro AngularJS".在浏览示例时，他让读者使用 Angular(当然)和已部署的服务器资源创建一个体育商店应用程序.已部署资源设置为返回要填充到模型中的 JSON 数据.我正在使用 NodeJS 来运行我的服务器.它当前设置在端口 5000 (http://localhost:5000/sportsstore/app.html) 上.已部署资源在端口 5500 (http://localhost:5500/products) 上运行.当点击 Deployd 时，响应如下:
我试图通过使用 $http.get 来检索这些数据:
$http.get("http://localhost:5500/products").success(function (data) { ... }).error(function (error) { ... });然而，这一直返回错误:
XMLHttpRequest 无法加载 http://localhost:5500/products.请求的资源上不存在Access-Control-Allow-Origin"标头.因此，不允许访问 Origin 'http://localhost:5000'.研究表明，Angular 和 CORS 存在/存在一些问题，并且必须配置标头以运行跨域请求.因此，我在 app.config 中添加了以下内容:
$http.defaults.useXDomain = true;删除 $http.defaults.headers.common['X-Requested-With'];//这不再需要了，但被放在这里作为以防万一尽管添加了这些设置，但我仍然收到错误消息.已部署的文档说它是为 CORS 自动配置的(Cross-Origin Requests)并将发送只要请求不包含无效的自定义标头，就提供相应的标头信息.我很确定我的请求不包含无效的自定义标头:
接受:application/json, text/plain, */*缓存控制:max-age=0来源:http://localhost:5000推荐人:http://localhost:5000/sportsstore/app.html用户代理:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36我的问题:是否还需要其他一些配置才能将 Deployd 配置为允许处理 CORS 请求?这本书没有指定任何特殊的 Angular 标题设置或其他任何内容.
Bic，将您的部署版本升级到 0.6.10 版本.这对我有用.我现在能够处理 get 请求.这似乎不是 AngularJS 代码的错误，也不是 Adam Freeman 的书.
在书中，他确实提到他在http://www.apress.com/上包含了已部署的程序以及源代码下载9781430264484.那是 0.6.9 版本.我确定它可以正常工作.这比尝试找到 0.6.10 版本要容易得多……这就是我所做的.如果你想要那个版本，这里是:
https://www.versioneye.com/nodejs/deployd/0.6.10
它不是安装程序，因此您必须将其粘贴到部署目录中，替换 node_modules.
I am currently reading through "Pro AngularJS" by Adam Freeman. In going through the examples, he has the reader create a sports store app using Angular (of course) with a Deployd server resource. The Deployd resource is set up to return JSON data that is to be populated into the model. I am using NodeJS to run my server. It is currently setup on port 5000 (http://localhost:5000/sportsstore/app.html). The Deployd resource is running on port 5500 (http://localhost:5500/products). When hitting Deployd, the response is as follows:
[
{ "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" }
]
I am attempting to retrieve this data through use of $http.get:
$http.get("http://localhost:5500/products")
.success(function (data) { ... })
.error(function (error) { ... });
However, this keeps returning an 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.
Research shows that there are/were some issues with Angular and CORS, and that the headers had to be configured to run cross-domain requests. As a result, I added the following to my 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
Despite having these settings added, I am still getting the error. The Deployd documentation says that it is automatically configured for CORS (Cross-Origin Requests) and will send the appropriate header information as long as the request did not contain invalid custom headers. I'm pretty sure my request does not contain invalid custom headers:
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
My Question: Is there some other configuration I need to put in place in order to have Deployd configured to allow the CORS request to process? The book does not specify any of the special Angular header settings or anything else.
Bic, upgrade your version of deployd to version 0.6.10. This did the trick for me. I was now able to process a get request. It doesn't seem like it's an error with AngularJS code nor Adam Freeman's book.
In the book, he does mention that he includes the deployd program with the source code download on http://www.apress.com/9781430264484. That's version 0.6.9. I'm sure it works fine with it. It'll be easier than to try to find the 0.6.10 version.. which is what I did. Should you want that version, here it is:
https://www.versioneye.com/nodejs/deployd/0.6.10
It's not an installer so you'll have to paste it in your deployd directory, replacing the node_modules.
这篇关于已部署 - 通过 AngularJS CORS 检索的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
