Не могу сделать запрос перекрестного происхождения (CORS)

Question

Я включил CORS в моем ASP.NET MVC API с этим кодом:

        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, данные не загружаются и возникает ошибка

"Доступ к XMLHttpRequest по адресу http://localhost:6320/api/users' из origin 'http://localhost:4200' заблокирован политикой CORS: Ответ на предполетный запрос не проходит проверку контроля доступа: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс ".

Почему возникает ошибка при попытке получить данные из приложения Angular, если я включил CORS?

Вот настройки приложений

  "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

Вы также должны включить CORS во внешнем интерфейсе. Отслеживание является одним из многих способов, как вы можете включить CORS в угловом режиме.

шаг 1: Создайте proxyconfig.json файл внутри основногопапка проекта (рядом с модулями src и node_modules).

шаг 2:

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

сохранить его внутри proxyconfig.json файл.

шаг 3:добавьте --proxy-config proxyconfig.json в запуск внутри объекта сценариев

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

внутри файла package.json.

шаг 4: сохраните и запустите проект с npm start

примечание: если вы начнете проект с (ng serve), он не будет работать.

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

Вы добавляете происхождение дважды. Сначала через .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();
}