Cors 政策角度

Question

我在从 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;
    }

Answer 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

Answer 2

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

创建 Angular 代理

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

   内容应如下所示

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

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

1. 使用架构师下的 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"
    },

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

旁注： 这不是用于生产的

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