仅在angular度资源请求上缺lessCORS头
我有一个工作节点/后端运行在本地主机上。 我正在构build一个需要从goodreads API中获取数据的项目应用程序。 当我执行请求时，我得到：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.goodreads.com/book/title.json?author=Arthur+Conan+Doyle&key=[my_key]&title=Hound+of+the+Baskervilles. (Reason: CORS header 'Access-Control-Allow-Origin' missing).1 <unknown> 服务器端，一切工作正常。 我已经启用了CORS，当检查标题时，在检查Firefox和Chrome开发工具中的标题后，来自我的服务器的所有内容都可以使用“Access-Control-Allow-Origin”。 当我通过$资源发出请求时，“Allow-Access …”在我的头文件中不存在。 这里是资源的代码：
.factory('goodReads', function($resource) { return $resource('https://www.goodreads.com/book/title.json'); }) .controller('AddBookSelectorController', function($resource, goodReads) { this.fetch = function() { var key = '[my_key]'; var data = goodReads.query({author: 'Arthur Conan Doyle', key: key, title: 'Hound of the Baskervilles'}); console.log(data); }; });
我打电话通过ng-click进行读取，除了出现CORS错误，一切正常。 任何人都可以指向正确的方向吗？ 我是angular新的，我的怀疑是有一个问题，我的资源请求或configuration中的东西，但我似乎无法find一个答案来解决我的问题在文档或其他stackoverflow问题。
更新3：这不是一个本地主机问题。 我尝试推送到我的域名，并使用一个简单的button，运行一个xhr请求的OpenBook API，问题变得更糟。 它通过Openshift托pipe，现在“Allow-Control-Access-x”头文件甚至不在我服务器上的其他文件中。 真的开始把我的头撞在这里的墙上。 我正在删除Angular标签，因为它与Angular无关。
更新2：在Chrome中安装“Allow-Control-Allow-Origin”扩展后，我得到了它的工作。 我的问题是我在本地主机上运行这个事实吗？ 还是有其他事情呢？ 如果没有扩展名，头文件仍然没有被设置。
更新：自8点以来，我一直在努力，仍然没有运气。 我已经尝试使用Angular的$ http重写请求，并使用Javascript的xhr以HTML5 Rocks |为例 使用Cors和我仍然有与每个方法相同的问题。 就像我所说的，必要的标题信息可以从我的服务器上的文件中获得，但是当我向其他网站发送请求时会中断。
我开始认为这可能不是一个angular度问题，但我真的不知道。 为了安全起见，下面是我添加到Express以启用CORS的代码，包括app.use，以便您可以了解我在何处调用它的位置：
app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Content-Length"); res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); res.header("Access-Control-Allow-Credentials", "true"); next(); }); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes);
编辑：这是API请求的标题：
请求头
Host: www.goodreads.com User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0 Accept: application/json, text/plain, */* Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate DNT: 1 Referer: http://localhost:3000/ Origin: http://localhost:3000 Connection: keep-alive
响应头
Cache-Control: max-age=0, private, must-revalidate Content-Encoding: gzip Content-Length: 686 Content-Type: application/json; charset=utf-8 Date: Wed, 02 Sep 2015 17:20:35 GMT Etag: "a2be782f32638d2a435bbeaf4b01274a-gzip" Server: Server Set-Cookie: csid=BAhJIhg1MzgtNTk4NjMzNy0wNzQ4MTM5BjoGRVQ%3D--afed14b563e5a6eb7b3fa9005de3010474230702; path=/; expires=Sun, 02 Sep 2035 17:20:33 -0000 locale=en; path=/ _session_id2=fd45336b8ef86010d46c7d73adb5f004; path=/; expires=Wed, 02 Sep 2015 23:20:35 -0000; HttpOnly Status: 200 OK Vary: Accept-Encoding,User-Agent X-Content-Type-Options: nosniff, nosniff X-Frame-Options: ALLOWALL X-Request-Id: 1K8EJWG30GWDE4MZ4R5K X-Runtime: 2.277972 X-XSS-Protection: 1; mode=block
来自我的服务器的.js文件的标题：
请求
Host: localhost:3000 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0 Accept: */* Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate DNT: 1 Referer: http://localhost:3000/ Cookie: _ga=GA1.1.1924088292.1439681064; connect.sid=s%3AB4O0Up9WF5iqkfky__I0XCiBD2aMATlq.gbJUC9GseqnJvRTEIbcwxD6cwFQeL7ljNScURCJ5As0 Connection: keep-alive If-Modified-Since: Wed, 02 Sep 2015 17:08:40 GMT If-None-Match: W/"886-14f8f0828c1" Cache-Control: max-age=0
响应：
Accept-Ranges: bytes Access-Control-Allow-Origin: * Cache-Control: public, max-age=0 Connection: keep-alive Date: Wed, 02 Sep 2015 17:20:30 GMT Etag: W/"886-14f8f0828c1" Last-Modified: Wed, 02 Sep 2015 17:08:40 GMT X-Powered-By: Express access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept
我想这个问题暴露了我的无知，但也许这会帮助像我这样的CORs的其他新手。 在得到一个CORs in Action的副本之后，我终于find了问题，并通过使用Flickr API的第一个示例进行了工作。
我的问题与后端，Angular，jQuery的.ajax方法或xhr无关。 我的所有请求都格式正确。 问题是我尝试使用的API没有在其服务器上启用COR。 Oo只要我将数据types更改为jsonp，一切都经过了。
无论如何，因为你喜欢我，所以如果你遇到这个问题，有一些指导可以帮助你：
1.不要假设您正在使用的API已启用COR
我不知道为什么，但是我盲目地select了两个没有启用COR的API，这就是我所做的大惊小怪的事情。 我从来没有遇到过这个问题，因为我用API做的工作一直都是从像Flickr那样的大公司那里启用CORs的。 如果他们不在服务器上设置Access-Control-Allow-Origin，则可以请求他们启用它，并同时使用JSONP。
如果API有最后一个callback选项，这是一个好的迹象，你应该使用JSONP来处理你的请求。 JSONP通过在callback中包装请求并利用脚本标记的function来工作。 脚本可以从任何域中获取其他脚本，因此它可以作为获取数据的手段。 这是一个很好的链接，帮助我。 究竟什么是JSONP？ | CameronSpear.com
2.检查响应头
我被这个骗了，但请记住，您对外部API的请求的响应标题是从他们的服务器，而不是你的响应。 如果您的服务器上已启用COR，则无需担心，您将请求发送给其他人，并且浏览器会自动将请求头中的信息发送给他们。 请记住，所有这些检查都是由浏览器出于安全考虑而完成的，所以它根据您的ajax调用在请求方面为您做了繁重的工作。 如果访问控制 – 不pipe什么都没有显示在响应头中，他们没有启用CORs。 如果你在前端工作，并要求别人的数据，你不能做任何事情。 使用JSONP，你的问题将消失（可能）。
对我来说，这个惨败开始了，因为我把来自我的服务器的响应与服务器响应混淆起来。 我正确地在自己的服务器上启用了COR，但是我在想它并没有将源信息附加到请求头中，这就是为什么它在响应头中不存在的原因。 实际上，一切正常，但API服务器没有启用它。
所以花了一天，但很多经验教训。 希望我的浪费时间可以帮助别人解决他们的COR问题。 请注意，我的问题是堆栈不可知的，所以无论您如何提出请求，检查响应头是遇到COR问题时要采取的第一个行动。 之后，我会build议查看请求本身的错误。
看看上面的书或从同一作者这个链接获得更多的帮助，特别是当涉及到非简单的请求HTML5 Rocks | 使用CORs 。