javascript - ADAL - SPA 应用程序中 Angular JS 中使用的 JavaScript，调用通过 APIGEE 公开的第三方 API，出现 CORS 错误

Question

我已创建 SPA 并使用 Azure AD 作为用户存储和 ADAL-JavaScript 库，如 http://www.cloudidentity.com/blog/2014/10/28/adal-javascript-and-angularjs-deep-dive/ 中所述。与我的 Angular js 代码集成。它成功完成了身份验证流程，但是当我调用使用 APIGEE 公开的第三方 API 时，我收到以下错误消息:

加载资源失败:服务器响应状态为 502(网关错误)

XMLHttpRequest 无法加载 http://webapiexposedusingapigee。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://mywebsite.in ' 因此不允许访问。响应的 HTTP 状态代码为 502。

当我检查 Fiddler 时，我得到了以下错误字符串。“faultstring=收到没有允许 header 的 405 响应”

警告为:

跨源请求被阻止:同源策略不允许读取 http://test.apigee.net/v1/selectop/myapi 处的远程资源。可以通过将资源移动到同一域或启用 CORS 来解决此问题。

我在 APIGEE 上添加了以下 header :

 <Header name="Access-Control-Allow-Origin">*</Header>
            <Header name="Access-Control-Allow-Credentials">true</Header>
            <Header name="Access-Control-Allow-Headers">Origin, X-Requested-With, Content-Type, Accept</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE, OPTION</Header>

对此的任何帮助表示感谢。

谢谢。

Answer 1

如果您在 WebAPI 端点上进行了正确的 CORS 设置，它将接受该请求。我不熟悉 APIGEE，但此链接列出了启用的步骤:http://apigee.com/docs/api-services/content/adding-cors-support-api-proxy .

您需要指定使用xdomain在Angular js中发送 header :

app.factory('contactService', ['$http', function ($http) {
var serviceFactory = {};

var _getItems = function () {
    $http.defaults.useXDomain = true;
    delete $http.defaults.headers.common['X-Requested-With'];
    return $http.get('http://adaljscors.azurewebsites.net/api/contacts');
};

serviceFactory.getItems = _getItems;

return serviceFactory;

}]);