从 Angular 到 Web.API 的 POST 请求被阻止的跨域请求

Question

我有一个小型演示应用：

1. FE 上的角度 (http://localhost:4200/)
2. BE 上的 ASP.Net Core (https://localhost:44333/)

从 FE 到 BE 的获取请求似乎工作正常。 但是 POST 请求抛出：

跨域请求被阻止：同源策略不允许读取位于https://localhost:44333/api/auth/login 的远程资源。 （原因：CORS 请求没有成功）

HTTP 工作正常。唯一的问题是 HTTPS。

邮递员使用相同的 api 方法可以正常工作：

Angular 服务如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthService {

  baseUrl = 'https://localhost:44333/api/auth/';

  constructor(private http: HttpClient) {

  }

  login(model: any) {

    return this.http.post(this.baseUrl + 'login', model)
      .pipe(
      map((response: any) => {
        const user = response;
        if (user) {
          localStorage.setItem('token', user.token);
        }
      }));
  }
}

现在在 BE 方面允许任何来源：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseAuthentication();
    app.UseMvc();
}

github 上提供的应用程序来源

dotnet 服务器控制台中的错误：

  Connection id "0HLK56HC2M58N" request processing ended abnormally. System.IO.IOException: The decryption operation failed,

查看内部异常。 ---> System.ComponentModel.Win32Exception：一个 处理证书时发生未知错误---结束 内部异常堆栈跟踪 --- 在 System.Net.Security.SslStreamInternal.ReadAsyncInternal[TReadAdapter](TReadAdapter 适配器，内存1 buffer) at Microsoft.AspNetCore.Server.Kestrel.Core.Adapter.Internal.AdaptedPipeline.ReadInputAsync(Stream stream) at System.IO.Pipelines.PipeCompletion.ThrowLatchedException() at System.IO.Pipelines.Pipe.GetReadResult(ReadResult& result) at System.IO.Pipelines.Pipe.ReadAsync(CancellationToken token) at System.IO.Pipelines.Pipe.DefaultPipeReader.ReadAsync(CancellationToken cancellationToken) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.BeginRead(ValueTask1& 等待）在 Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication1 application) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication1 应用程序）信息：Microsoft.AspNetCore.Server.Kestrel[20] Connection id "0HLK56HC2M58O" 请求处理异常结束。 System.IO.IOException：解密操作失败， 见内部异常。 ---> System.ComponentModel.Win32Exception：一个 处理证书时发生未知错误---结束 内部异常堆栈跟踪 --- 在 System.Net.Security.SslStreamInternal.ReadAsyncInternal[TReadAdapter](TReadAdapter 适配器，内存1 buffer) at Microsoft.AspNetCore.Server.Kestrel.Core.Adapter.Internal.AdaptedPipeline.ReadInputAsync(Stream stream) at System.IO.Pipelines.PipeCompletion.ThrowLatchedException() at System.IO.Pipelines.Pipe.GetReadResult(ReadResult& result) at System.IO.Pipelines.Pipe.ReadAsync(CancellationToken token) at System.IO.Pipelines.Pipe.DefaultPipeReader.ReadAsync(CancellationToken cancellationToken) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.BeginRead(ValueTask1& 等待）在 Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication1 application) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication1 应用程序）信息：Microsoft.AspNetCore.Server.Kestrel[20] Connection id "0HLK56HC2M58Q" 请求处理异常结束。 System.IO.IOException：解密操作失败， 见内部异常。 ---> System.ComponentModel.Win32Exception：一个 处理证书时发生未知错误---结束 内部异常堆栈跟踪 --- 在 System.Net.Security.SslStreamInternal.ReadAsyncInternal[TReadAdapter](TReadAdapter 适配器，内存1 buffer) at Microsoft.AspNetCore.Server.Kestrel.Core.Adapter.Internal.AdaptedPipeline.ReadInputAsync(Stream stream) at System.IO.Pipelines.PipeCompletion.ThrowLatchedException() at System.IO.Pipelines.Pipe.GetReadResult(ReadResult& result) at System.IO.Pipelines.Pipe.ReadAsync(CancellationToken token) at System.IO.Pipelines.Pipe.DefaultPipeReader.ReadAsync(CancellationToken cancellationToken) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.BeginRead(ValueTask1& 等待）在 Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication1 application) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication1 应用程序）信息：Microsoft.AspNetCore.Server.Kestrel[20] Connection id "0HLK56HC2M58P" 请求处理异常结束。 System.IO.IOException：解密操作失败， 见内部异常。 ---> System.ComponentModel.Win32Exception：一个 处理证书时发生未知错误---结束 内部异常堆栈跟踪 --- 在 System.Net.Security.SslStreamInternal.ReadAsyncInternal[TReadAdapter](TReadAdapter 适配器，内存1 buffer) at Microsoft.AspNetCore.Server.Kestrel.Core.Adapter.Internal.AdaptedPipeline.ReadInputAsync(Stream stream) at System.IO.Pipelines.PipeCompletion.ThrowLatchedException() at System.IO.Pipelines.Pipe.GetReadResult(ReadResult& result) at System.IO.Pipelines.Pipe.GetReadAsyncResult() at System.IO.Pipelines.Pipe.DefaultPipeReader.GetResult(Int16 token)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication1 应用程序）在 Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication`1 申请）

Answer 1

看来你需要添加AllowCredentials 方法。

请查看此documentation，了解跨域请求中的凭据。

app.UseHttpsRedirection();
app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());
app.UseAuthentication();
app.UseMvc();

Answer 2

在开发时允许使用通配符的 CORS。

//Allow CORS, * wildcard only for development period, be specific once done
app.UseCors(builder => builder.WithOrigins("http://localhost:4200")
.AllowAnyHeader().AllowAnyMethod().AllowCredentials());

希望这会有所帮助:)