Restify和Angular CORS请求的资源上没有"Access-Control-Allow-Origin"标头

Question

在使用带有承载令牌授权类型的Restify实现REST api时,我遇到了这个问题.

当我向API服务器发送简单的get请求时,它失败并出现CORS问题

405(不允许的方法)angular.js:7962

选项http://api.host.com/tests请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许来源" http://local.host.com "访问.

---

在我的回答中描述了解决方案,所以这对我来说不是真正的问题,因为我在已经知道答案时放置了它,但希望它将来会为其他人节省时间.

Answer 1

因为解决问题所面临的问题是内部CORS模块管理CORS逻辑.在此模块中,您可以找到允许的标头列表,默认情况下是这样

[
        'accept',
        'accept-version',
        'content-type',
        'request-id',
        'origin',
        'x-api-version',
        'x-request-id'
]

正如我在问题中所说,我使用了承载令牌身份验证,所以我发送了带有Authorization标头的请求.它不包含在默认列表中,这就是我的请求失败的原因.

要解决该问题,我们需要将此标头添加到ALLOW_HEADERS列表中.在我的restify配置代码中,我添加了这一行:

restify.CORS.ALLOW_HEADERS.push('authorization');

如果你遇到类似的问题,可以认为信息可能会有所帮助,因为我花了很多钱来寻找解决方案.

Answer 2

由于同源策略,您将无法访问http://api.host.com/tests部署的文件中的URL .http://local.host.com

由于源(源)页面和目标URL位于不同的域,您的代码实际上是在尝试发出跨域(CORS)请求(因此错误OPTIONS- 请参阅下面的说明),而不是普通的GET.

简而言之,同源策略强制执行浏览器只允许Ajax调用与HTML页面在同一域中的服务.

示例:页面中http://www.example.com/myPage.html只能直接请求中的服务http://www.example.com,例如http://www.example.com/testservice/etc.如果该服务位于其他域中,则浏览器不会进行直接调用(如您所期望的那样).相反,它会尝试发出CORS请求.

简而言之,要执行CORS请求,您的浏览器:

• 将首先向OPTION目标URL 发送请求
• 然后,只有当服务器响应OPTIONS包含足够的标头(Access-Control-Allow-Origin是其中之一)以允许CORS请求时,浏览才会执行调用(几乎与HTML页面位于同一域时的方式完全相同).

如果没有预期的标题OPTIONS,浏览器将放弃,通知错误(它尝试了CORS请求并且没有找到必要的标题).

怎么解决？

• 将目标服务放在原始页面的同一域中; 要么
• 在服务器上启用CORS(启用必要的标头); 要么
• 如果您没有服务器端的服务器端访问权限,则还可以镜像它(在您拥有的服务器中创建它的副本).
• 如果您只是想要请求信息,JSONP也是一个解决方案(但这也需要服务器端访问设置).