在. net核心Web api和角6中启用CORS

Question

在这里，我使用了一个来自Angular 6的HTTP POST请求，它在. net核心Web API调用中命中，但我没有将响应输出返回到Angular 6，并且在控制台上出现了一个错误：

“访问位于的XMLHttpRequest”http://localhost:55654/api/login/auth“起源”http://localhost:4200'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。"

但我有点困惑，如果它是任何CORS启用访问问题，它不会影响web API调用。但是它命中了API调用，我没有得到响应。

Angular 6 HTTP POST请求：

this.http.post("http://localhost:55654/api/login/auth", credentials, {
  headers: new HttpHeaders({
 "Content-Type": "application/json"
      })
  }).subscribe(response => {
      let token = (<any>response);
      localStorage.setItem("jwt", token);
    }, err => {

    });

我在下面的方法中启用了CORS。NetCore Web API

在启动中配置方法。cs：

...
app.UseCors(options =>
  options.WithOrigins("http://localhost:4200")
    .AllowAnyMethod()
    .AllowAnyHeader());
 ...

启动中的ConfigureServices方法。cs：

...
services.AddCors();
...

Answer 1

我建议添加一个代理来访问您的后端。只需向根目录添加一个代理文件（proxy.conf.json）。

为您的应用提供服务：ng s--proxy-config[PathToProxy]

例如：

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

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Answer 2

如评论中所述：

调用应用程序。UseMvc需要在应用程序之后。UseCors

...
app.UseCors(options =>
  options.WithOrigins("http://localhost:4200")
    .AllowAnyMethod()
    .AllowAnyHeader());

app.UseMvc();
...

Answer 3

启动时。cs加载项配置服务：

services.AddCors();

关于配置添加

app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

这解决了你的问题