Microsoft Online Auth 没有“Access-Control-Allow-Origin"标头

No #39;Access-Control-Allow-Origin#39; header with Microsoft Online Auth(Microsoft Online Auth 没有“Access-Control-Allow-Origin标头)
本文介绍了Microsoft Online Auth 没有“Access-Control-Allow-Origin"标头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 Microsoft graph OAuth 端点发出一个简单的请求以获取访问令牌.当我发送下面的简单请求时,我得到了

<块引用>

请求的资源上不存在Access-Control-Allow-Origin"标头.Origin 'localhost:8080/myapprunninglocally' 因此不允许访问.**"

var xhttp = new XMLHttpRequest();xhttp.open("GET", "https://login.microsoftonline.com/common/oauth2/authorize?client_id=<client_id>&scope=wl.signin%20wl.calendars_update&response_type=token&redirect_uri=localhost:8080/myapprunninglocally", true);xhttp.send();

我还使用 Microsoft Azure 目录注册了这个应用程序,请求了所有权限,并使用了委派的 client_id.

我已经阅读了 CORS 并且我知道跨域策略但是,我知道有些 API 公开了在它们的端点中包含 'Access-Control-Allow-Origin'响应头.有人能帮忙吗?

解决方案

要将 AAD 集成到 javascript 中,我们建议您使用 azure-activedirectory-library-for-js 这是一个 javascript 库,用于前端轻松集成 AAD.

在我们使用 ADAL for JS 之前,我们需要注意两个选项:

  • 根据节点 https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample:<块引用>

    注意此示例无法在 Internet Explorer 中运行.请使用其他浏览器,例如 Google Chrome.ADAL.js 使用 iframe 为 SPA 自己的后端以外的资源获取 CORS API 令牌.这些 iframe 请求需要访问浏览器的 cookie 才能通过 Azure Active Directory 进行身份验证.不幸的是,当应用程序在 localhost 中运行时,Internet Explorer 无法访问 cookie.

  • 启用 Azure AD 应用程序的 oauth2AllowImplicitFlow.参考 https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/了解详细步骤.

以下是从 Microsoft Graph 获取访问令牌的代码示例:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.14/js/adal.min.js"></script><身体><a href="#" onclick="login();">登录</a><a href="#" onclick="getToken()">访问令牌</a></身体><脚本类型="文本/javascript">var configOptions = {tenant: "<tenant_id>",//默认可选,发送commonclientId: "<client_id>",postLogoutRedirectUri:window.location.origin,}window.authContext = new AuthenticationContext(configOptions);var isCallback = authContext.isCallback(window.location.hash);authContext.handleWindowCallback();函数getToken(){authContext.acquireToken("https://graph.microsoft.com",function(error, token){控制台日志(错误);控制台.log(令牌);})}函数登录(){authContext.login();}</脚本>

I am trying to make a simple request to get an access token using the Microsoft graph OAuth endpoint. When I send the simple request below I get

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080/myapprunninglocally' is therefore not allowed access.**"

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://login.microsoftonline.com/common/oauth2/authorize?client_id=<client_id>&scope=wl.signin%20wl.calendars_update&response_type=token&redirect_uri=localhost:8080/myapprunninglocally", true);
xhttp.send();

I have also registered this app using Microsoft Azure Directory, requested ALL permissions, and used the delegated client_id.

I have read up on CORS and I am aware Cross-Origin Policies however, I'm aware there are APIs which expose endpoints that include the 'Access-Control-Allow-Origin' in their response headers. Is anyone able to help?

解决方案

To integrate AAD in javascript, we suggest you to use azure-activedirectory-library-for-js which is a library in javascript for frontend to integrate AAD with a ease.

There are 2 options we need to pay attention on before we use ADAL for JS:

  • According the node at https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample:

    Note This sample will not work in Internet Explorer. Please use a different browser, such as Google Chrome. ADAL.js uses an iframe to get CORS API tokens for resources other than the SPA's own backend. These iframe requests require access to the browser's cookies to authenticate with Azure Active Directory. Unfortunately, cookies are not accessible to Internet Explorer when the app is running in localhost.

  • Enable the oauth2AllowImplicitFlow of your Azure AD application. Refer to https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/ for the detailed steps.

Here is the code sample to acquire access token from Microsoft Graph:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.14/js/adal.min.js"></script>

<body>
<a href="#" onclick="login();">login</a>
<a href="#" onclick="getToken()">access token</a>
</body>
<script type="text/javascript">
    var configOptions = {
        tenant: "<tenant_id>", // Optional by default, it sends common
        clientId: "<client_id>",
        postLogoutRedirectUri: window.location.origin,
    }
    window.authContext = new AuthenticationContext(configOptions);

    var isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();

    function getToken(){
        authContext.acquireToken("https://graph.microsoft.com",function(error, token){
            console.log(error);
            console.log(token);
        })
    }
    function login(){
        authContext.login();
    }
</script>

这篇关于Microsoft Online Auth 没有“Access-Control-Allow-Origin"标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)