无法发出跨域请求 (CORS)答案

【问题标题】：Can't make a cross origin request (CORS)无法发出跨域请求 (CORS)
【发布时间】：2019-10-21 20:48:16
【问题描述】：

我在我的 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": {
    "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());
        }

【问题讨论】：

您要授权所有来源吗？你打电话给WithOrigins(config["AppSettings:CorsOrigin"]) 和AllowAnyOrigin()。还要验证您的 config["AppSettings:CorsOrigin"] 是否返回了良好的价值。
查看stackoverflow.com/questions/56162910/…
请添加完整的Startup.Configure 实现。

标签： asp.net angular

【解决方案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.UseCors(); 之前调用app.UseMvc();。确保您的 Configure 方法具有以下顺序：

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

【讨论】：

我试过这段代码，但仍然是同样的错误。是的，有AppSettings，我在原帖里加了。
@Janis 你最后删除了“.Build()”吗？
是的，我删除了它，仍然显示相同的错误。
@Janis 如果你使用 '.AllowAnyOrigin()' 而不是 '.WithOrigins(config["AppSettings:CorsOrigin"])' 会发生什么？有用吗？
@Janis 还要检查您在“配置”中调用“app.UseCors()”和“app.UseMvc()”的顺序。检查我在答案中的编辑。

【解决方案2】：

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

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

第二步：

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

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

第 3 步：在脚本对象内的 start 中添加 --proxy-config proxyconfig.json

"start": "ng serve --proxy-config  proxyconfig.json"

在 package.json 文件中。

第 4 步：保存并启动项目 npm start

注意：如果您使用 (ng serve) 启动项目，它将不起作用。

【讨论】：

可以直接访问后端配置，为什么还要配置代理？

【解决方案3】：

从你的启动类中删除它：

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();
}

如果以这种方式工作，那么您对 Policy 及其对 UseCors 方法的分配有疑问。

【讨论】：