Question

我正在学习 Angular 2 。这是我的服务，它应该从ASP.NET Web api应用程序中提取数据。

@Injectable()
export class ExpenseService {
  private _expUrl = "http://localhost:65400/api/expenses";

  constructor(private _http: Http){}    

  getExpenses(): Observable<IExpense[]> {
    return this._http.get(this._expUrl)
        .map((response: Response) => <IExpense[]>response.json())
        .do(data => console.log('ALL: ' + JSON.stringify(data)))
        .catch(this.handleError)
  }    
  //more here...
}

以上代码在Microsoft Edge中正常运行。但是，在Chrome和FireFox中，我收到以下错误：

XMLHttpRequest cannot load http://localhost:65400/api/expenses. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed

我已按照许多帖子的建议在我的网络API中启用了CORS。

public void ConfigureServices(IServiceCollection services)
{
   services.AddCors();
   //...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
       ILoggerFactory loggerFactory)
{
  //...
  app.UseCors(builder =>
            builder.WithOrigins("http://localhost:3000/"));
}

这并没有改变结果。我在Chrome和FireFox中仍然遇到同样的错误，而Edge工作得很好。

感谢您的帮助

Answer 1

CORS是由服务器支持的客户端强制执行的操作。

CORS可以帮助您作为用户。它限制了客户端（如主机google.com上的javascript）在mydomain.com上调用服务的可能性。这是一个跨域调用，Chrome和FireFox不允许这样做。（会假设Edge也支持此功能）。如果您在某些主机和端口上托管服务和客户端，则不使用CORS。

服务必须定义允许来自跨域的主机。这可以来自全部或来自特定主机。

要允许所有主机访问，请执行以下操作：

<强>配置

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

<强>控制器

[EnableCors("AllowSpecificOrigin")]
public class TestController : ApiController

如果您的服务是公共服务，请注意其后果。

您可以在此处阅读更多内容：https://docs.microsoft.com/en-us/aspnet/core/security/cors

如何在ASP.NET Web Api中启用Cors

1 个答案: