Cors 政策角度

Posted 2023-03-04

【中文标题】Cors 政策角度

【英文标题】：Cors Policy Angular

【发布时间】：2021-04-27 00:15:12

【问题描述】：

我在从 Angular 发送身份验证标头 jwt 令牌时遇到了以下问题。 从源“http://localhost:4200”访问“http://localhost:52278/api/user/signup”的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

.Net Core

            var origins = Configuration["CorsUrl"].Split(",");
            services.AddCors(options =>
            
                options.AddPolicy("BasePolicy",
                builder =>
                
                    builder
                    .AllowAnyMethod()
                    .WithOrigins(origins)
                    .AllowAnyHeader()
                    .AllowCredentials()
                    .AllowAnyMethod();
                );

            );

        app.UseAuthorization();
        app.UseCors("BasePolicy");
        app.UseHttpsRedirection();

角度：

    signUpAdmin(data: AdminSignUpModel) 
        return this.httpClient.post('user/signup', data,this.getCommonOptions());
    

private _token: string = localStorage.getItem('auth_token');

   protected getCommonOptions() 
        const httpOptions = 
            headers: new HttpHeaders(
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': '*',
                Authorization: `Bearer $this._token`,
                
            )
        ;
        return httpOptions;
    

【参考方案1】：

从源“http://localhost:4200”访问“http://localhost:52278/api/user/signup”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制允许源”请求的资源上存在标头。

要解决问题，请尝试在代码中指定允许的来源，而不是从配置设置中获取数据，如下所示。

services.AddCors(options =>

    options.AddPolicy("BasePolicy",
    builder =>
    
        builder
        .AllowAnyMethod()
        .WithOrigins("http://localhost:4200", "https://localhost:44336") 
        .AllowAnyHeader()
        .AllowCredentials()
        .AllowAnyMethod();
    );

);

请注意，指定的 URL 不得包含尾部斜杠 (/)，例如 http://localhost:4200/。

请修改代码以在UseRouting之后、UseAuthorization之前调用UseCors方法。

app.UseRouting();
//...

app.UseCors("BasePolicy");

app.UseAuthorization();

有关在 ASP.NET Core 中启用 CORS 的更多信息，请查看此文档：

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-5.0#cors-with-named-policy-and-middleware

【参考方案2】：

因此，您的 Angular CLI 开发服务器在 http://localhost:4200 上运行，并且您想要访问在 http://localhost:52278 上运行的服务器，您需要 为 Angular 中的 API 调用设置代理。

创建 Angular 代理

在我们的 Angular CLI 项目的根目录下创建一个文件 proxy.conf.json。

内容应如下所示

  "/api/*": 
    "target": "http://localhost:52278",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  

现在从我们的应用程序中向/api/... 发出的所有请求都将转发到http://localhost:52278/api/....

使用架构师下的 proxyConfig 键配置 angular.json>serve>指向 src/proxy.conf.json 的选项，如下所示

"architect": 
  "serve": 
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": 
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    ,

现在，只需运行 ng serve 即可完成。

旁注： 这不是用于生产的

将它用于开发还有其他更复杂的解决方案适用于您的生产环境，无论是将您的应用直接部署到“后端应用”还是通过 Apache 2 或 nginx 提供服务。

【讨论】：

抱歉忘了在创建proxy.conf.json后编辑angular.json文件:)