Ошибка CORS при вызове Aurelia.NET core API 2.0

Question

Я получаю ошибку CORS и не знаю, как ее исправить. У меня есть приложение Aurelia, которое вызывает API.NET core 2.0 с помощью aurelia-fetch-client. Я получаю следующую ошибку:

Не удалось загрузить http://localhost:58289/api/info: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник ' http://localhost:8080/ ', следовательно, не имеет доступа. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса "no-cors", чтобы получить ресурс с отключенным CORS.

Ошибка типа: не удалось получить данные на applyInterceptors (webpack-internal:///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:428:14) в processResponse (webpack-internal:///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:411:10) в eval (webpack-internal:///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:299:14) Из предыдущего события: в HttpClient.eval (webpack-internal:///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:287:61) в HttpClient.fetch (внутренний веб-пакет:///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:273:21) в App.callApi (webpack-internal:///app:42:25) в CallScope.evaluate (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:1578:19) в Listener.callSource (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:5279:40) в Listener.handleEvent (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:5288:10) в HTMLDocument.handleDelegatedEvent (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:3363:20)

Пожалуйста, найдите мой код ниже.

Конфигурация aurelia-fetch-client:

const http = new HttpClient().configure(config => {
    config
        .withBaseUrl(environment.apiBaseUrl)
        .withDefaults({
          headers: {
              'Content-Type': 'application/json'
          }
        })
        .withInterceptor({
          request(request: Request) {
            var token = localStorage.getItem('access_token')
            request.headers.append('Authorization', 'Bearer ' + token)
            return request;
          },
          responseError(error){
            return error;
          }
      });
  });

  aurelia.container.registerInstance(HttpClient, http);

Позвоните в API:

callApi(){
    this.httpClient.fetch("/info")
      .then(response => console.log(response));
  }

Настройка запуска API:

public void ConfigureServices(IServiceCollection services)
{
    string domain = $"https://{Configuration["Auth0:Domain"]}/";
    var allowedCors = Configuration["CorsSite"];

    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;

    }).AddJwtBearer(options =>
    {
        options.Authority = domain;
        options.Audience = Configuration["Auth0:ApiIdentifier"];
    });
    services.AddCors(options => options.AddPolicy("AllowSpecificOrigin", `builder => {`
        builder.AllowAnyOrigin().AllowAnyMethod(); }));
    services.AddMvc();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("AllowSpecificOrigin");
    app.UseAuthentication();
    app.UseMvc();
}

контроллер:

[Produces("application/json")]
[Route("api")]
public class InfoController : Controller
{
    // GET api/values
    [HttpGet]
    [Route("Info")]
    public IActionResult Get()
    {
        return Ok("Api V1.0");
    }

    [Route("authorizedInfo")]
    [Authorize]
    [HttpGet]
    public IActionResult GetAuthorized()
    {
        return Ok("Authorized Api V1.0");
    }
}

Пожалуйста, пока игнорируйте бит авторизации. Я только пытаюсь поразить несанкционированную конечную точку API в localhost, но я застрял. Как я могу исправить мою проблему?

Answer 1

Ответ в следующей ссылке исправил мою проблему.

Веб-API 2 CORS IIS Express Отладка и Нет заголовка Access-Control-Allow-Origin

Похоже, что если в запросе нет заголовка источника, сервер не ответит соответствующим ответом Access-Control-Allow-Origin. Также со значениями по умолчанию aurelia-fetch-client я бы ожидал добавить заголовок источника по умолчанию.

Answer 2

Для этого начните с регистрации функциональности CORS в ConfigureServices() файла Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    // Add service and create Policy with options
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials() );
    });


    services.AddMvc(); 
}

Вызов AddCors() выше добавляет функции CORS в ASP.NET и создает пользовательскую политику, которую можно повторно использовать в приложении по имени. Существуют и другие способы сделать, по сути, то же самое, явно добавив компоновщик политик на этапе настройки, но для меня это кажется самым чистым - сначала определите одну или несколько политик, а затем примените их.

Как только политика была определена, она может быть применена.

Вы можете применить политику глобально к каждому запросу в приложении, вызвав app.useCors() в методе Configure() при запуске:

public void Configure(IApplicationBuilder app)
{
    // ...

    // global policy - assign here or on each controller
    app.UseCors("CorsPolicy");

    // ...

    // IMPORTANT: Make sure UseCors() is called BEFORE this
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

или вы можете применить политику к отдельным контроллерам:

[EnableCors("CorsPolicy")]
[ApiExceptionFilter]
public class AlbumViewerApiController : Controller

Благодарю вас