从Angular2调用Web API时出现No 'Access-Control-Allow-Origin'错误

嘿，兄弟，你这明显是跨域请求被浏览器同源策略拦住了！毕竟你的Web API跑在localhost:22770，Angular客户端在localhost:4200，端口不一样就属于不同源，浏览器会直接拦截这类跨域请求。别慌，我给你几个靠谱的解决办法：

方案1：给Web API启用CORS（最推荐的标准方案） #

这是解决跨域问题的常规操作，几步就能搞定：

1. 先装CORS的NuGet包
   打开NuGet包管理器控制台，敲这个命令：

   Install-Package Microsoft.AspNet.WebApi.Cors
   

2. 全局配置CORS规则
   找到Web API项目里App_Start文件夹下的WebApiConfig.cs，修改Register方法：

   using System.Web.Http;
   using System.Web.Http.Cors;
   
   namespace YourWebApiProjectName
   {
       public static class WebApiConfig
       {
           public static void Register(HttpConfiguration config)
           {
               // 只允许你的Angular客户端来源请求，生产环境别用"*"哦
               var corsSettings = new EnableCorsAttribute("http://localhost:4200", "*", "*");
               config.EnableCors(corsSettings);
   
               // 原有Web API路由配置不动
               config.MapHttpAttributeRoutes();
   
               config.Routes.MapHttpRoute(
                   name: "DefaultApi",
                   routeTemplate: "api/{controller}/{id}",
                   defaults: new { id = RouteParameter.Optional }
               );
           }
       }
   }
   

   简单解释下参数：

   • "http://localhost:4200"：指定允许发起请求的来源，换成"*"就是允许所有网站（生产环境谨慎用）
   • 第一个"*"：允许所有请求头
   • 第二个"*"：允许所有HTTP方法（GET/POST/PUT/DELETE这些CRUD操作都包含了）

3. 也可以给单个控制器/方法单独开CORS
   如果不想全局启用，就在特定控制器或者方法上加特性：

   [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
   public class YourApiController : ApiController
   {
       // 你的CRUD方法写在这里...
   }
   

方案2：给Angular配代理（开发环境快速测试神器） #

不想动Web API的话，也可以让Angular帮你转发请求，假装是同源的：

1. 在Angular项目根目录新建proxy.conf.json文件，内容如下：

   {
     "/api/*": {
       "target": "http://localhost:22770",
       "secure": false,
       "logLevel": "debug"
     }
   }
   

2. 修改angular.json里的启动配置，把代理文件加上：
   找到architect -> serve -> options，添加一行：

   "proxyConfig": "proxy.conf.json"
   

3. 重启Angular应用，之后你在Angular里发请求直接写/api/xxx，它会自动转发到http://localhost:22770/api/xxx，完美绕开跨域问题。

方案3：临时凑合用——把俩端口改成一样的 #

如果只是临时测试，嫌麻烦的话，直接把Web API的端口改成4200，或者把Angular的启动端口改成22770，这样同源了就不会有问题。不过这只是应急办法，正式开发还是用上面两种方案比较好。

几个排查小技巧 #

• 先确认Web API本身没问题：直接在浏览器里敲http://localhost:22770/api/你的控制器名，看看能不能返回正常数据
• 看浏览器控制台的错误提示：一般会明确说“No 'Access-Control-Allow-Origin' header is present”，这就实锤是CORS问题了
• 用Postman测请求：看看响应头里有没有Access-Control-Allow-Origin字段，有的话说明CORS配置生效了

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