Angular调用Microsoft OAuth2/token API遇CORS问题，求前端/后端解决方案

问题根源 #

• Microsoft的oauth2/v2.0/token端点不支持前端直接跨域请求，浏览器同源策略会拦截这类跨域调用。
• 更关键的是，client_secret属于敏感凭证，绝对不能暴露在前端代码中，一旦泄露会导致应用权限被恶意滥用。

正确解决方案：通过.NET后端API中转请求 #

部署在私有区域的.NET API可以安全调用Microsoft的token接口，再将令牌返回给Angular前端，具体实现如下：

1. 在.NET API中实现令牌请求逻辑 #

创建一个API接口，内部封装对Microsoft token端点的调用：

using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class TokenController : ControllerBase
{
    private readonly HttpClient _httpClient;

    public TokenController(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    [HttpPost("getAzureSearchToken")]
    public async Task<IActionResult> GetAzureSearchToken()
    {
        var tenantId = "你的租户ID";
        var clientId = "你的客户端ID";
        var clientSecret = "你的客户端密钥";
        var scope = "https://search.azure.com/.default";

        var requestContent = new FormUrlEncodedContent(new[]
        {
            new KeyValuePair<string, string>("client_id", clientId),
            new KeyValuePair<string, string>("scope", scope),
            new KeyValuePair<string, string>("client_secret", clientSecret),
            new KeyValuePair<string, string>("grant_type", "client_credentials")
        });

        var response = await _httpClient.PostAsync(
            $"https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token", 
            requestContent
        );

        if (response.IsSuccessStatusCode)
        {
            var tokenData = await response.Content.ReadAsStringAsync();
            return Ok(tokenData);
        }
        else
        {
            var error = await response.Content.ReadAsStringAsync();
            return BadRequest(error);
        }
    }
}

2. 配置.NET API的CORS策略 #

允许Angular前端域名跨域访问该接口，在Program.cs中添加配置：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp",
        policy => policy.WithOrigins("http://localhost:4200") // 替换为你的Angular应用实际域名
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

builder.Services.AddControllers();
builder.Services.AddHttpClient();

var app = builder.Build();

// 启用CORS中间件（需放在路由之前）
app.UseCors("AllowAngularApp");

app.UseAuthorization();

app.MapControllers();

app.Run();

3. Angular前端调用自己的.NET API #

修改Angular代码，不再直接请求Microsoft的token端点，转而调用自己的.NET API：

// Angular组件中的代码
const apiUrl = 'https://你的.NET API域名/api/token/getAzureSearchToken';

this.httpClient.post(apiUrl, {}).subscribe((res) => {
  console.log(res);
  // 拿到令牌后再调用目标Azure Search API
});

为什么禁止前端直接请求 #

• 安全红线：client_secret暴露在前端代码中，任何人都能获取并冒充你的应用调用API，造成数据泄露或权限滥用。
• 无法绕过的CORS限制：Microsoft的token端点没有配置允许前端域名的跨域规则，浏览器会直接拦截请求，不存在前端层面的绕过方案。

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