Angular 4/Asp.net Web API跨域问题：无'Access-Control-Allow-Origin'头

我来帮你一步步搞定这个CORS跨域报错，不用Angular代理的话，核心是把Web API的CORS配置做对，同时Angular这边也有几个小细节要注意：

一、Web API 端配置（分两种主流框架场景） #

1. ASP.NET Core Web API 配置步骤 #

首先得确保安装了CORS相关依赖，打开终端运行：

dotnet add package Microsoft.AspNetCore.Cors

然后修改Startup.cs文件，重点注意中间件的顺序：

第一步：在ConfigureServices中注册CORS策略

public void ConfigureServices(IServiceCollection services)
{
    // 自定义CORS策略，允许你的Angular应用域名访问
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAngularClient",
            builder => 
            {
                // 替换成你的Angular实际运行地址，比如http://localhost:4200
                builder.WithOrigins("http://localhost:4200")
                       .AllowAnyMethod() // 允许所有HTTP方法（GET/POST/PUT/DELETE等）
                       .AllowAnyHeader() // 允许所有请求头
                       .AllowCredentials(); // 如果请求需要携带Cookie/凭证，必须加上这一行
            });
    });

    // 其他服务注册，比如控制器
    services.AddControllers();
}

第二步：在Configure中启用CORS（顺序不能错！）

CORS中间件必须放在UseRouting之后、UseAuthorization之前，否则不会生效：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    // 启用CORS，应用上面定义的策略
    app.UseCors("AllowAngularClient");

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

2. 传统ASP.NET Web API 配置步骤 #

如果是旧版非Core的ASP.NET Web API，步骤如下：

1. 通过NuGet安装Microsoft.AspNet.WebApi.Cors包
2. 修改App_Start/WebApiConfig.cs：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 启用CORS，指定允许的Angular域名、请求头和方法
        var corsSettings = new EnableCorsAttribute("http://localhost:4200", "*", "*");
        config.EnableCors(corsSettings);

        // 路由配置
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

也可以单独在控制器或Action上添加[EnableCors("AllowAngularClient")]特性，实现更细粒度的控制。

二、Angular 4 端配置细节 #

Angular这边不需要复杂配置，但要注意两个关键点：

1. 确保请求的API地址正确，比如在你的数据服务类中：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 替换成你的Web API实际地址
  private apiBaseUrl = 'http://your-web-api-domain/api';

  constructor(private http: HttpClient) { }

  fetchData() {
    return this.http.get(`${this.apiBaseUrl}/your-endpoint`);
  }
}

2. 如果Web API配置了AllowCredentials，Angular请求必须带上withCredentials选项：

fetchData() {
  return this.http.get(`${this.apiBaseUrl}/your-endpoint`, { withCredentials: true });
}

三、常见坑点排查（很多人在这里栽跟头） #

• Origin匹配错误：WithOrigins里的地址必须和Angular运行地址完全一致，包括http/https和端口号（比如Angular在http://localhost:4200，就不能写成http://localhost或者https://localhost:4200）。要允许多个域名的话，用逗号分隔即可：builder.WithOrigins("http://localhost:4200", "https://your-production-site.com")
• 中间件顺序错误：ASP.NET Core中UseCors的位置绝对不能乱，必须在UseRouting之后、UseAuthorization之前
• 预检请求被拦截：如果请求用了PUT/DELETE方法或者自定义头，浏览器会先发OPTIONS请求验证。如果Web API的其他中间件（比如自定义认证中间件）拦截了OPTIONS请求，会直接导致失败，一定要确保CORS中间件先处理请求
• 配置未生效：修改Web API配置后，一定要重启API服务！很多人改完代码直接刷新浏览器，结果白忙活
• IIS部署额外配置：如果Web API部署在IIS上，检查是否有IIS自带的CORS模块和代码中的配置冲突。传统Web API可能需要在web.config中添加头（但不要和代码中的EnableCors重复配置）：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

按照这些步骤配置后，应该就能解决No 'Access-Control-Allow-Origin' header和预检请求失败的问题了。

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