Ошибка 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.

TypeError: Не удалось получить данные в applyInterceptors (webpack-internal: ///./node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js:428:14) at 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 (webpack-internal: ///./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

Спасибо