【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)

问题描述

前端Web在开发时使用Azure AD中注册Application的方式进行Token获取，遇到了CORS遇到的问题(如下图)。随后在AAD增加了单页应用的重定向URL, 依旧还是出现CORS Error问题。

CORS Error:

Access to XMLHttpRequest at 'https://login.chinacloudapi.cn/XXXXXXXXXXXXXXXXXXXXXXX/oauth2/v2.0/token' 
from origin 'http://localhost:9005' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

问题解决

根据错误信息，需要在请求的Header中添加 Access-Control-Allow-Origin 并把值设置为 * 或者是 当前请求的URL，如“http://localhost:9005”。 这种方式是通过前端来解决问题。如果可以操作所请求的后端，可以在后端服务中启用CORS功能并配置Origin。

而关于前端VUE配置CORS可以参考博文：Vue学习总结-Vue前端解决跨域问题

解决跨域问题，正常情况下有两种，既然涉及到两端，那么大的就是从两端各自处理。

第一种：从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问

第二种：从前端vue处理，vue提供了相关的配置，通过代理的方式进行跨域请求

————————————————
原文链接：https://blog.csdn.net/yyj108317/article/details/110504369

【完】