React应用调用Azure AD ROPC端点遭遇CORS问题及解决咨询

一、先搞定AD应用注册的CORS配置 #

• 登录Azure门户，找到你的应用注册，进入CORS设置（在API权限旁边）
• 把React应用的实际访问域名加进去：比如生产环境用的App Service域名https://yourapp.azurewebsites.net，本地开发就加http://localhost:3000
• 一定要勾选允许凭据——ROPC请求带用户名密码，必须开这个
• 别用通配符*，带凭据的跨域请求不支持通配符，加了也白搭

二、检查App Service的CORS配置（如果你用它当宿主/代理） #

要是你把App Service用来托管前端或者做接口代理：

• 进App Service的CORS设置页，同样把前端访问域名加进去
• 注意：如果同时配置了应用注册和App Service的CORS，两边规则要对齐，别冲突

三、重要提醒：别在React前端直接调用ROPC接口 #

ROPC流程天生不适合浏览器端：

• 用户名密码直接写在前端代码里，等于裸奔，安全风险拉满
• 浏览器的CORS策略对这类带敏感凭据的跨域请求限制极严，就算暂时搞定CORS，后续也可能出其他问题
• 正确姿势：在App Service上搭个后端接口，让后端去调用AD的ROPC接口，React前端只调自己的后端接口——既解决跨域，又藏住敏感信息

四、本地开发临时绕开CORS（仅限开发用） #

本地开发时嫌配置麻烦，可以用React的代理：

• 简单版：在package.json里加一行"proxy": "https://login.microsoftonline.com"
• 精细版：装http-proxy-middleware，然后在src/setupProxy.js里写规则：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/{你的租户ID}/oauth2/v2.0/token',
    createProxyMiddleware({
      target: 'https://login.microsoftonline.com',
      changeOrigin: true,
    })
  );
};

• 记住：这个方法只给开发用，上线必须换后端代理

内容的提问来源于stack exchange，提问作者Johnson Jayaraj