zoukankan      html  css  js  c++  java
  • 【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

    【完】

    当在复杂的环境中面临问题,格物之道需:浊而静之徐清,安以动之徐生。 云中,恰是如此!

  • 相关阅读:
    计算机网络学习目录
    手把手教你玩微信小程序跳一跳
    (三)python函数式编程
    跟托福说分手
    (二)python高级特性
    BitCoin工作原理
    反向传播的工作原理(深度学习第三章)
    1.22计划
    梯度下降——神经网络如何学习?(深度学习第二章)
    什么是神经网络 (深度学习第一章)?
  • 原文地址:https://www.cnblogs.com/lulight/p/14822543.html
Copyright © 2011-2022 走看看