Angular7+无npm依赖调用微软Graph Token及用户组接口遇CORS问题咨询

你遇到的CORS拦截不是请求配置错误导致的：微软针对https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token这个凭据交换端点做了严格的跨域限制，从设计上就不会对浏览器端发起的XMLHttpRequest跨域请求返回Access-Control-Allow-Origin响应头，这是接口的安全边界设计——避免应用的客户端密钥、用户凭据被第三方网页脚本非法截取。需要说明的是，CORS拦截仅出现在token交换环节，微软Graph的业务接口本身是支持浏览器跨域带认证头调用的，不会对合法的业务请求做CORS拦截。你也无需为这个问题引入任何Angular生态的认证SDK，以下方案都可以在零Angular npm依赖的前提下跑通全流程。

方案1：轻量同域代理转发（生产环境首选） #

• 部署一层极简的同域转发服务，完全不增加Angular应用本身的依赖：
  • 你可以用边缘函数（几行代码即可实现）、现有后端服务的路由，或者静态托管平台的路径重写能力，配置两个转发规则：
    1. 接收Angular前端发来的同域/proxy/token请求，将所有请求参数透传给微软的token端点，拿到返回的access_token后，补充正确的CORS响应头返回给前端
    2. 接收前端发来的带token的同域/proxy/groups请求，将请求转发给微软Graph的https://graph.microsoft.com/v1.0/users/{UserId}/getMemberGroups接口，把返回的用户组列表回传给前端
• 该方案下所有前端请求都是和同域服务通信，从根源上避免跨域问题，同时也不会把敏感的客户端密钥暴露在浏览器端，安全性最高。

方案2：顶层跳转授权拿Token（零后端依赖可选） #

• 这个方案完全不需要后端服务，也不会触发XHR跨域拦截，因为整个授权流程走的是浏览器顶层页面跳转，不是XMLHttpRequest请求：
  1. 前端通过window.location.href直接跳转到微软的授权端点：https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize，在跳转参数中带上你的应用client_id、应用注册时配置的redirect_uri、response_type=token、需要的调用权限范围；如果需要更高安全性，可以搭配PKCE校验参数走授权码流跳转逻辑，整个流程依然不需要引入额外Angular依赖
  2. 用户在微软官方登录页完成认证授权后，微软会将access_token附加在redirect地址的URL fragment（#之后的参数段）中，跳转回你的Angular应用
  3. 应用初始化时解析URL fragment中的access_token，之后直接调用Graph的getMemberGroups接口即可，不会出现CORS拦截
• 注意：纯跳转拿token的方式存在token存储在浏览历史的泄露风险，生产环境需要在拿到token后及时清理URL中的敏感参数，同时做好token过期逻辑处理。

• 不要尝试通过修改浏览器安全设置、安装CORS绕过插件的方式解决，这类方案只适合本地开发调试，无法覆盖所有访问你的应用的终端用户，生产环境完全不可用
• 不要在前端代码中硬编码应用的客户端密钥来请求token，这类做法会把敏感凭据完全暴露在浏览器侧，存在极高的安全风险

内容的提问来源于stack exchange，提问作者Harsh Gajjar