Question

我有一个使用axios库的React应用程序来处理请求。所以在下一篇文章之后：

How to login with username/password using OAuth2 and microsoft login and HTTP request

我可以对Postman执行操作。

然后我设置axios库来执行POST

const dataForBody = `${'grant_type=password&' +
      'username='}${encodeURI(userName)}&` +
      `password=${encodeURI(userPassword)}&` +
      `client_id=${encodeURI(clientID)}&` +
      `resource=${encodeURI('https://graph.microsoft.com')}&` +
      `client_secret=${encodeURI(clientSecret)}`;
const messageHeaders = {
  'Content-Type': 'application/x-www-form-urlencoded'
};

axios({
  method: 'post',
  url: 'https://login.microsoftonline.com/{tenant}/oauth2/token',
  headers: messageHeaders,
  data: dataForBody,
})
  .then((response) => {

  });

但是我收到以下错误：

阻止跨源请求：同源策略禁止读取远程资源在 https://login.microsoftonline.com/ {租户} /的oauth2 /令牌。（原因：缺少CORS标题'Access-Control-Allow-Origin'。

我尝试添加：

'Access-Control-Allow-Origin': 'https://login.microsoftonline.com',

到标题，但它不起作用。

因此添加Allow-Control-Allow-Origin: * chrome扩展程序修复了我的问题。

问题是，我的应用程序将在azure上发布，因此我在其他Web浏览器上测试了该请求，但它无效。所以我不希望我的用户安装扩展程序。

我的请求有问题吗？为什么邮递员可以在不设置标题的情况下完成？

有没有其他方法可以实现它？

PS：我读过关于使用adal.js但我不想使用微软的登录界面，因为我知道用户并传递了应用程序，我想避免手动登录。

Answer 1

您遇到的问题是由于您尝试通过AJAX调用令牌端点，由于CORS标头丢失而无法接受。您无法添加它，但Azure AD的响应中缺少它。

您需要做的是不必从令牌端点获取访问令牌，而必须使用OAuth隐式授权流程。此流程允许您直接在授权阶段获取令牌，并且专为基于JavaScript的应用程序而设计。更多信息：https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant。

这意味着您不能像现在一样使用密码授予流程，除非您从后端而不是前端拨打电话。

Microsoft从oauth2问题登录

1 个答案: