无法从Angular UI张贴到ASP.NET WebApi

时间:2018-07-27 03:11:55

标签: c# asp.net angular asp.net-web-api fetch

我正在尝试将对象从Angular应用程序发布到ASP.NET WebApi,但是出现以下错误。

  

无法加载http://localhost:64859/api/comments:对预检请求的响应未通过访问控制检查:所请求的资源上没有'Access-Control-Allow-Origin'标头。因此,不允许访问来源“ http://localhost:4200”。响应的HTTP状态码为404。如果不透明的响应满足您的需求,请将请求的模式设置为“ no-cors”,以在禁用CORS的情况下获取资源。

在.service.ts中,我正在使用fetch()发送POST。

fetch(this.Url, {
  method: 'post',
  body: JSON.stringify(obj), 
  headers:{
    'Content-Type': 'application/json'
    'Access-Control-Allow-Origin': '*' // Do I need this?
  } 
}).then(function (response) {
  console.log(response.text());
  return response.json();
}).then(function(data) {
  console.log('Error:', data);
});

这是我API中的控制器。

// POST api/<controller>
[HttpPost]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public string Post([FromBody]Obj obj)
{ ... }

在Startup.cs中...

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllOrigins",
            builder => { builder.AllowAnyOrigin(); });
    });
}

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

1 个答案:

答案 0 :(得分:1)

我猜您必须在“ AddMvc” /“ UseMvc”之前放置“ AddCors”或“ UseCors” 像这样的东西:

services.AddCors(o => o.AddPolicy("AllowAllOrigins", builder =>
            {
                 builder.AllowAnyMethod()
                   .AllowAnyHeader()
                   .AllowAnyOrigin();
            }));
services.AddMvc();

或在Configure方法中

app.UseCors("AllowAllOrigins");
app.UseMvc();

并更改此部分

[EnableCors(origins: "*", headers: "*", methods: "*")]

[EnableCors("AllowAllOrigins")]

并且不要在抓取中设置“访问控制允许来源”

尝试一下并告诉我结果