Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了node.js – 仅在角度资源请求中缺少CORS标头大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个在localhost上运行的工作节点/ express后端.我正在构建一个需要从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”.但是,当我通过$resource发出请求时,我的标题中不存在“允许访问…”.这是资源的代码

.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调用fetch,除了收到CORS错误外,一切正常.谁能指出我正确的方向?我是角色的新手,我的怀疑是我的资源请求或配置中有什么问题,但我似乎找不到解决方法来修复我的问题在文档或其他stackoverflow问题.

更新3:它不是localhost问题.我尝试将它推送到我的域并使用一个简单的按钮,它向OpenBooks api运行xhr请求,问题变得更糟.它通过Openshift托管,现在即使我服务器上的其他文件,’Allow-Control-Access-x’标题也消失了.真的开始在这里撞到我的头.我正在删除Angular标签,因为它与Angular无关.

更新2:我在Chrome中安装了“Allow-Control-Allow-Origin”扩展程序后就开始工作了.我的问题是我在localhost上运行吗?或者还有其他事情发生了吗?没有扩展名时仍未设置标头.

更新:我从早上8点开始就一直在努力,但仍然没有运气.我尝试使用Angular的$http和Javascript的xhr重写请求,遵循HTML5 Rocks | Using Cors的示例,我仍然遇到与每种方法相同的问题.就像我说的那样,我的服务器上的文件可以获得必要的头信息,但是当我向其他站点发出请求时它就会中断.

我开始认为这可能不是一个角度问题,但我真的不知道.为了安全起见,这里是我添加到Express以启用CORS的代码,@L_674_26@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,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,Accept

解决方法

我想这个问题暴露了我的无知,但也许这会帮助像我这样的其他新手.在获得CORs in Action副本并使用Flickr API完成第一个示例后,我终于找到了问题.

我的问题与后端,Angular,jQuery的.ajax方法或xhr无关.我的所有请求都已正确格式化.问题是我尝试使用的API没有在其服务器上启用COR. o.o我一旦将数据类型更改为jsonp,一切都会通过.

无论如何,对于像我这样的新手,如果你遇到这个问题,这里有一些指示可以帮助你:

1.不要假设您使用的API已启用COR

我不知道为什么,但我盲目地选择了两个没有启用COR的API,这对我来说是个大惊小怪.我之前从未遇到过这个问题,因为我用API完成的工作一直来自像Flickr那样启用了CORs的大公司.如果他们没有在他们的服务器上设置Access-Control-Allow-Origin,您可以请求他们启用它并在此期间使用JSONP.

如果API在末尾有一个回调选项,那么你应该使用JSONP来表示你的请求. JSONP的工作原理是将您的请求包装在回调中并利用脚本标记功能.脚本可以从任何域中提取其他脚本,因此它可以作为获取数据的黑客.这是一个帮助我的好链接. Exactly What is JSONP? | CameronSpear.com

2.检查响应标头

我被这个骗了,但请记住,对外部API请求的响应头是来自他们服务器的响应,而不是你的.如果您的服务器上启用了COR,您向其他人发出请求并且浏览器会自动将您的信息发送到请求标头中,则无关紧要.请记住,出于安全原因,所有这些检查都是由浏览器完成的,因此它会根据您的ajax调用在请求端为您完成繁重的工作.如果Access-Control-whatever没有显示在响应头中,则它们没有启用COR.如果您正在处理前端并请求其他人的数据,那么您无法做任何事情.使用JSONP,您的问题将消失(可能).

对我来说,整个惨败开始了,因为我对来自我的服务器的响应感到困惑,并且响应来自他们的服务器.我在我自己的服务器上正确启用了COR,但我认为它没有将原始信息附加到请求标头,这就是它在响应头中不存在的原因.实际上,一切都正常,但API服务器没有启用它.

所以花了一天,但吸取了许多教训.希望我浪费时间帮助其他人解决他们的COR问题.请注意,我的问题是堆栈不可知,因此无论您如何发出请求,检查响应标头是您遇到COR问题时要采取的第一个行动方案.在那之后,我建议查看请求本身的错误.

查看上面的那本书或同一作者的这个链接以获得更多帮助,特别是涉及到非简单请求HTML5 Rocks | Using CORs.

大佬总结

以上是大佬教程为你收集整理的node.js – 仅在角度资源请求中缺少CORS标头全部内容,希望文章能够帮你解决node.js – 仅在角度资源请求中缺少CORS标头所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。