AngularJS + Asp.net WebApi - 由于 CORS，无法进行身份验证

Posted 2023-03-04

【中文标题】AngularJS + Asp.net WebApi - 由于 CORS，无法进行身份验证

【英文标题】：AngularJS + Asp.net WebApi - Cannot get authentication to work due to CORS

【发布时间】：2021-03-15 17:05:18

【问题描述】：

我有一个与 ASP.Net WebApi 后端对话的 AngularJS 应用程序。

UI 和 API 都托管在同一个域/服务器上，但在不同的端口上：

用户界面：https://www.example.com API：https://www.example.com:8888

UI 已成功与 API 进行所有必需的 HTTP 方法（GET、POST 等）的通信，但我无法进行身份验证。

当调用“/login”时，我从 API 得到以下响应：

从源“https://www.example.com”访问“https://www.example.com:8888/api/login”处的 XMLHttpRequest 已被 CORS 政策阻止：对预检请求的响应没有“ t 通过访问控制检查：它没有 HTTP ok 状态。

来自 ASP.Net WebApi 的 Web.Config 摘录

<configuration>
  <system.webServer>
    ...
    <httpProtocol>
       ...
       <customHeaders>
         <clear />
            <!-- CORS Configuration -->
            <add name="Access-Control-Allow-Origin" value="https://www.example.com" />
            <add name="Access-Control-Allow-Headers" value="*" />
            <add name="Access-Control-Allow-Methods" value="*" />
            <add name="Access-Control-Allow-Credentials" value="true" />
            <!-- /CORS Configuration -->
        </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

API 应用中没有其他与 CORS 相关的配置。

从 AngularJS 前端调用以进行身份​​验证

attemptLogin (userId, password) 
  var data = 
    UserId: userId,
    Password: password
  ;
     
  return this.$http.post("https://www.example.com:8888/login", data,  withCredentials: true );       

有趣...

...如果我将“Access-Control-Allow-Origin”标头设置为通配符“*”，我会收到一条不同的消息，这表明 API 正确地将 API 调用识别为与身份验证相关。

从源“https://www.example.com”访问“https://www.example.com:8888/api/login”处的 XMLHttpRequest 已被 CORS 政策阻止：对预检请求的响应没有“ t 通过访问控制检查：当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

谁能解释我做错了什么？

【参考方案1】：

您可能需要在 UI 中包含您正在使用的端口。像这样：

<add name="Access-Control-Allow-Origin" value="https://www.example.com:4200" />