Question

我已使用以下代码在ASP.NET MVC API中启用了CORS：

        public static void Configure(IApplicationBuilder app)
        {
            app.UseCors("CorsName");
        }
        public static void ConfigureServices(IServiceCollection services, IConfiguration config)
        {
            // Configuration and adding Cross-origin resource sharing
            services.AddCors(options =>
            {
                options.DefaultPolicyName = "CorsName";
                options.AddPolicy("CorsName", builder =>
                {
                    builder
                        .WithOrigins(config["AppSettings:CorsOrigin"])
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials()
                        .AllowAnyOrigin()
                        .Build();
                });
            });
        }

我尝试从API获取数据，打开localhost：6320 / api / users，它可以工作，我获取了所有数据。现在，当我尝试从Angular 7应用获取数据时，数据未加载且出现错误

“从'http://localhost:6320/api/users访问XMLHttpRequest 原产地“ http://localhost:4200”已被CORS政策阻止：对预检请求的响应未通过访问控制检查：否请求中存在“ Access-Control-Allow-Origin”标头资源。”

如果启用了CORS，为什么尝试从Angular应用获取数据时会出错？

这是AppSettings

  "AppSettings": {
    "DashboardUrl": "http://127.0.0.1:4200",
    "CorsOrigin": "http://localhost:4200"
  }

Startup.cs中的启动配置

        public Startup(IHostingEnvironment env, IConfiguration configuration)
        {
            Configuration = configuration;

            HostingEnvironment = env;
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment hEnv)
        {
            InitializeIdentityDbAsync(app.ApplicationServices).Wait();
            DiagnosticsStartup.Configure(app, hEnv);
            CorsStartup.Configure(app);
            IdentityStartup.Configure(app, Configuration);
            MVCStartup.Configure(app);
        }
                public void ConfigureServices(IServiceCollection services)
        {
        CorsStartup.ConfigureServices(services, Configuration);
        services.AddAutoMapper();
        services.AddSingleton<IConfiguration>(o => Configuration);
        services.AddScoped<IAppContext, AppContext>();
        services.AddSingleton<IEmailService, EmailService>();
            services.AddScoped<AuthService>();
            services.AddScoped<UserService>();
            EFStartup.ConfigureServices(services, Configuration);
            IdentityStartup.ConfigureServices(services, HostingEnvironment, Configuration);
            MVCStartup.ConfigureServices(services);
            AutoMapperConfig.RegisterMappings(services.BuildServiceProvider());
        }

Answer 1

您要添加两次原点。首先，通过.WithOrigins(config["AppSettings:CorsOrigin"])，然后通过.AllowAnyOrigin()。如果仅允许特定的来源（考虑到您的配置，我认为这是正确的），则删除.AllowAnyOrigin()调用。

尝试：

services.AddCors(options =>
{
    options.AddPolicy("CorsName", builder =>
    {
        builder
            .WithOrigins(config["AppSettings:CorsOrigin"])
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

检查您从config["AppSettings:CorsOrigin"]获得的收益。您有一个名为AppSettings的钥匙吗？

还有，可能（而且很可能是）您在app.UseMvc();之前致电app.UseCors();。确保您的Configure方法具有以下顺序：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //...
    app.UseCors("CorsName");
    app.UseMvc();
}

Answer 2

从启动类中删除它：

services.AddCors(options =>
{
    options.AddPolicy("CorsName", builder =>
    {
        builder
            .WithOrigins(config["AppSettings:CorsOrigin"])
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

，然后在Configure方法中尝试以下操作：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //...
    app.UseCors(builder => {
        builder
        .WithOrigins(config["AppSettings:CorsOrigin"])
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials();
     });
    app.UseMvc();
}

如果以这种方式工作，则您对策略及其分配给UseCors方法有疑问。

Answer 3

您还必须在前端启用CORS。以下是您可以在angular中启用CORS的多种方法之一。

步骤1：在主项目文件夹（在src和node_modules旁边）内创建 proxyconfig.json 文件。

第2步：

<p> text1 </p>
<p> text2 </p>
<p> text n </p>

将其保存在 proxyconfig.json 文件中。

步骤3：在脚本对象内部的开始处添加--proxy-config proxyconfig.json

{
  "/api": {
  "target":"url to the server", (eg: "http://45.33.74.207:3000")
  "secure": false,
  "changeOrigin": true
  }
}

内部package.json文件。

步骤4：保存并启动项目 "start": "ng serve --proxy-config proxyconfig.json"

注意：如果您以（ng serve）开始项目，则将无法正常工作。

无法提出跨源请求（CORS）

3 个答案: