React + ASP.NET.Core: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       19

React + ASP.NET.Core: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 19 октября 2018

На самом деле это не сообщение дублирование , я знаю, что часть заголовка много раз спрашивалась в сообществе stackoverflow , я читаю все сообщения и ответы, но я думаю, что моя проблемаи технологии, которые я использовал, отличаются.

Прежде всего, я должен упомянуть, ASP.NET Core WEB/API - это мое back-end-приложение, а Reactjs - это мое переднее приложение.

Я читал о CORS и я узнал, что я должен включить CORS в ASP.NET приложении и поставить 'Access-Control-Allow-Origin':'*' в заголовок моего запроса, но у меня все еще есть ошибка ниже, когда я вызываю API:

Нет 'Заголовок Access-Control-Allow-Origin 'присутствует в запрашиваемом ресурсе.Происхождение 'http://localhost:8080' поэтому не допускается.Ответ имеет HTTP-код состояния 500. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Это мой код Startup.csотносится к CORS: 

public void ConfigureServices(IServiceCollection services)
{

    // other lines of code
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll",
            builder =>
            {
                builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
            });
    });

    services.Configure<MvcOptions>(options =>
    {
        options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));
    });
    // other lines of code
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    app.UseCors("AllowAll");
    app.UseAuthentication();
    app.UseMvc();
}

Это мой код реакции: 

function save(message) {
    const requestOptions = {
        method: 'POST',
        mode: 'cors',
        headers: { ...authHeader(), 
            'Content-Type': 'application/json',    
            'Access-Control-Allow-Origin':'*',

    },
        body: JSON.stringify(message)               
    };
    return fetch(config.apiUrl + '/message/save', requestOptions).then(handleResponse, handleError);
}

Спасибо за ваш ответ.

Ответы [ 4 ]

0 голосов
/ 20 октября 2018

После двух трудных дней, наконец, я узнал, как я могу решить мою проблему.На самом деле, один из ваших комментариев был для меня хорошей подсказкой.

@ kirk-larkin сказал:

Ответ имеет HTTP-код состояния 500, который является ключевым здесь.Когда в вашем проекте ASP.NET Core есть исключение, заголовки CORS очищаются.Вы должны попытаться выяснить, почему возникает исключение.

Я много раз отслеживал свой код, а потом обнаружил, что забыл зарегистрировать службу, которую использовал в своем контроллере, в Startup.cs.

Я вызвал приведенный ниже код в Startup.cs, и моя проблема решена. 

services.AddScoped<IMessageService, MessageService>();
0 голосов
/ 19 октября 2018

У меня недавно была похожая проблема.В моем случае это начало работать, когда я добавил services.AddCors(); в моем методе ConfigureServices и эту часть кода 

app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
   .AllowCredentials());

в моем методе Configure.Не забудьте добавить эти ДО Вызов UseMvc () в обоих случаях.

0 голосов
/ 19 октября 2018

В ASP.NET Core 2.1, когда контроллер выдает исключение, что приводит к ошибке 500, заголовки CORS не отправляются.Это должно быть исправлено в следующей версии, но до этого вы могли бы использовать промежуточное программное обеспечение для исправления.

см.

Также обратите внимание, что с учетными данными вам необходимо явно добавить WithOrigins с хостом и портом, так как большинство браузеров просто игнорируют его в противном случае (см. https://stackoverflow.com/a/19744754/2477619):

  app.UseCors(builder =>
    builder
      .WithOrigins("http://localhost:4200")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials()
  );
0 голосов
/ 19 октября 2018

У меня была такая же проблема, когда я делал свое приложение.Я скачал это расширение Chrome и проблема исчезла.Может это тебе поможет?

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

...