Azure AD Preflight 请求未返回数据 [英] Azure AD Preflight request not returning data

问题描述

我目前正在尝试向 https://login.microsoftonline.com/发送发布请求XXX/oauth2/token 端点，用于检索应用程序的访问令牌和刷新令牌.使用 axios 向端点发送 post 请求时，preflight 被发送，但没有返回任何响应.

Im currently trying to send a post request to https://login.microsoftonline.com/XXX/oauth2/token endpoint to retrieve an access token and refresh token for an application. When sending the post request to the endpoint using axios, the preflight is sent off, however no response is returned.

错误:

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

但是对 axios 发布请求使用不同的方法，它返回数据但没有预检并给出不同的错误:

However using a different approach to the axios post request, it returns the data but has no preflight and gives the a different error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

两个 Axios 请求:

Both Axios Requests:

const data = new FormData();

 data.append('grant_type', this.config.grant_type); 
 data.append('client_id', this.config.client_id);
 data.append('code', localStorage.getItem('auth_code'));
 data.append('redirect_uri', this.config.redirect_uri);
 data.append('client_secret', this.config.client_secret);
 data.append('resource', this.config.client_id);

axios.post(`https://login.microsoftonline.com/${this.config.tenant}/oauth2/token`, data);

方法二:

  axios({
  method: 'post',
  contentType: 'application/json',
  url: `https://login.microsoftonline.com/${this.config.tenant}/oauth2/token`,
  data: {
    grant_type: this.config.grant_type,
    client_id: this.config.client_id,
    code: localStorage.getItem('auth_code'),
    redirect_uri: this.config.redirect_uri,
    client_secret: this.config.client_secret,
    resource: this.config.client_id
  }
});

这是 axios 请求本身的问题还是端点的问题?

Is this a problem with the axios request itself or with the endpoint?

推荐答案

您应该使用隐式授予流程来获取访问令牌.您不能使用包含来自前端 JavaScript 的客户端密码的流程！

You should use the Implicit Grant flow to get the access token. You cannot use a flow where you include a client secret from front-end JavaScript!

您的客户端密码(也就是您的应用密码)目前对访问您网站的任何人都是公开的！

Your client secret (AKA your app's password) is currently public to anyone who visits your site!

您不能在前端 JavaScript 中使用客户端密码.

You cannot use a client secret in front-end JavaScript.

您需要在应用的清单中启用隐式流，然后在您的应用中使用如下 URL 重定向到 Azure AD:

You will need to enable implicit flow in the app's manifest, and then in your app make a redirect to Azure AD with a URL like this:

https://login.microsoftonline.com/tenant-id-here/oauth2/authorize?client_id=your-client-id&response_type=id_token+token&resource=resource-id-for-api&redirect_uri=your-app-redirect-url

文档:https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-authentication-scenarios#single-page-application-spa

这篇关于Azure AD Preflight 请求未返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！