尽管在 Web API 中设置了 CORS 策略阻止 [重复]

Posted 2023-02-27

【中文标题】尽管在 Web API 中设置了 CORS 策略阻止 [重复]

【英文标题】：Block by CORS Policy althouht is setup in the Web API [duplicate]

【发布时间】：2019-09-26 10:27:23

【问题描述】：

我正在运行 ASP.NET Core Angular 应用程序，我在 Core 应用程序中添加了一个 Api 控制器，我试图从 Angular 应用程序进行 api 调用，Core 应用程序托管在 58181 上，Angular 应用程序托管在 44337 上，当我尝试从 Angular 调用 Api

Access to XMLHttpRequest at 'http://localhost:58181/api/authenticate/login' from origin 'https://localhost:44337' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

我在 API 中配置 Cors

   services.AddCors(options =>
            
                options.AddPolicy("CorsPolicy", policy =>
                
                    policy.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                );
            );

  app.UseCors("CorsPolicy");

我正在尝试像这样调用 API

 register() 
    var body = 
      UserName: this.formModel.value.UserName,
      Email: this.formModel.value.Email,
      FullName: this.formModel.value.FullName,
      Password: this.formModel.value.Passwords.Password
    ;
    return this.http.post(this.BaseURI + '/authenticate/register', body, 
      headers: new HttpHeaders( 
      'Access-Control-Allow-Origin':'*',
      'Content-Type': 'application/json',
      'Authorization':'authkey',
      'userid':'1'
    ));
  

我期望调用我的身份验证控制器并登录/注册我的用户，Angular 应用程序和 API 都将位于同一个本地主机上，在不同的端口上。

【问题讨论】：

您实际上不需要设置Content-Type 标头，因为您正在使用HttpClient。此外，Access-Control-Allow-Origin 是针对跨域请求的 Options 调用的响应标头。所以你也不需要在你的请求头中设置它。

developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…

Angular 应用程序在浏览器中运行，它们没有端口。我有点困惑你如何有两个不同的端口。您是否使用angular-cli 并使用ng-serve 和proxy-conf 代理您的请求？你有两个核心应用吗？

【参考方案1】：

您的代码应该是这样的。确保中间件的顺序正确

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

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

【参考方案2】：

为了启用 CORS，下面是代码：

在 web 项目中，我在根位置添加了一个 crossdomain.xml 文件来保存内容

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

    <!-- Most restrictive policy: -->
    <site-control permitted-cross-domain-policies="none"/>
</cross-domain-policy>

在web项目配置文件web.config中，添加标签：

<location path="crossdomain.xml">
    <system.webServer>
      <staticContent>
        <clear />
        <mimeMap fileExtension=".xml" mimeType="text/x-cross-domain-policy" />
      </staticContent>
    </system.webServer>
  </location>

另一个变化是配置文件下的WEB API端： AngularJS Allow-Origin to WebApi2

谢谢