在 Web API Core 和 Angular JS 中启用 CORS

Posted 2023-03-04

【中文标题】在 Web API Core 和 Angular JS 中启用 CORS

【英文标题】：Enabling CORS in Web API Core and Angular JS

【发布时间】：2017-02-08 16:15:45

【问题描述】：

我在不同的本地主机中托管了一个 WEB API 核心，我正在尝试通过 AngularJS $http 服务从我的 MVC 核心应用程序访问它。

这是我的 homeController.js

app.controller("homeController", function ($scope, $http) 

$scope.accessToken = "";
var serviceBase = "https://localhost:44351/";
var request = $http(
    method: "post",
    url: serviceBase + "api/token",
    data:
        
            username: "DemoUser",
            password: "Password"
        ,
    headers: 
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Methods': 'GET, POST'
    
);
request.success(function (result) 
    $scope.accessToken = result;
);
);

在 WEB API Core 的 Startup.cs 中启用跨源调用

public void ConfigureServices(IServiceCollection services)

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


public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

       ..
        app.UseCors(builder =>
        builder.WithOrigins("https://localhost:44352/")
        .AllowAnyHeader()
        );
      ..
 

尽管如此，我仍然在 chrome 中收到此错误。

XMLHttpRequest cannot load https://localhost:44351/api/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:44352' is therefore not allowed access.

我可以从 Postman 客户端调用 api。 我错过了什么步骤？请帮忙。

我为此做的修复：

在 WebAPI 项目 web.config 文件中

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://localhost:xxxxx" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
    <add name="Access-Control-Allow-Credentials" value="true" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>
...

在 StartUp.cs

中

public void ConfigureServices(IServiceCollection services)

 services.AddCors();
//  services.AddMvc();

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  app.UseCors(builder =>
        builder
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials()
        );

Chrome 不允许我在 Access-Control-Allow-Origin 字段中使用 *。

还在 project.json 中添加了"Microsoft.AspNetCore.Cors": "1.0.0"

感谢大家的帮助。我真的很菜鸟。

【问题讨论】：

复制并显示请求和响应的标头

我能够克服这个问题，请参阅编辑了解详细信息。

【参考方案1】：

如果您希望在 web api 核心端启用 CORS，请按照以下步骤操作-

首先，在project.json中添加依赖-"Microsoft.AspNetCore.Cors": "1.0.0",

然后像这样在startup.cs 中启用 CORS-

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

如果你想限制到特定的来源，那么你可以这样做-

app.UseCors(builder => builder.WithOrigins("example.com"));

您可以找到更多关于 CORS 的信息here

看看这是否有帮助。

【参考方案2】：

在您的 Configure 方法中，您忘记允许任何方法，因此 POST 请求失败。您的 Configure 方法应如下所示：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

       ..
        app.UseCors(builder =>
        builder.WithOrigins("https://localhost:44352/")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        );
      ..
 

而且您忘记发送凭据，如果您不发送并且使用身份验证 cookie 或反 XHRF，它们将不会被发送：

var request = $http(
    method: "post",
    url: serviceBase + "api/token",
    data:
        
            username: "DemoUser",
            password: "Password"
        ,
    withCredentials: true
    
);

【参考方案3】：

你必须把这些：

headers: 
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods': 'GET, POST'

在服务器响应中，而不是客户端请求中