Javascript 在Web API核心和Angular JS中启用CORS

我有一个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核心的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>
...

Chrome不允许我在

Access Control Allow Origin

字段中使用*

在project.json中还添加了

“Microsoft.AspNetCore.Cors”：“1.0.0”

谢谢大家的帮助。我真的不知道这一点。

你必须把这些：

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

---

在服务器响应中，而不是客户端请求中，如果您希望在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"));

如果你想限制到特定的原点，你可以这样做-

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

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

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

---

查看这是否有帮助。

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

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
       ..
        app.UseCors(builder =>
        builder.WithOrigins("https://localhost:44352/")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        );
      ..
 }

您忘记发送凭据，如果您不发送，并且如果您使用anthentication Cookie或anti-XHRF，则不会发送凭据：

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

---

从请求和响应中复制和显示标题我能够克服此问题，有关详细信息，请参阅编辑。