Включение CORS в ядре Web API и Angular JS

#javascript #angularjs #asp.net-core #cors #asp.net-core-webapi

#javascript #angularjs #asp.net-ядро #cors #asp.net-core-webapi

Вопрос:

У меня есть ядро WEB API, размещенное на другом локальном хосте, и я пытаюсь получить к нему доступ из моего приложения MVC Core через службу AngularJS $ http.

Вот мой homeController.js

 app.controller("homeController", function ($scope, $http) {

$scope.accessToken = "";
var serviceBase = "https://localhost:44351/";
var request = $http({
    method: "post",
    url: serviceBase   "api/token",
    data:
        {
            username: "DemoUser",
            password: "Password"
        },
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Methods': 'GET, POST'
    }
});
request.success(function (result) {
    $scope.accessToken = resu<
});
});
  

Чтобы включить перекрестные исходные вызовы в Startup.cs ядра WEB API

 public void ConfigureServices(IServiceCollection services)
{
        ...
        services.AddCors();
        ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
       ..
        app.UseCors(builder =>
        builder.WithOrigins("https://localhost:44352/")
        .AllowAnyHeader()
        );
      ..
 }
  

Несмотря на это, я все еще получаю эту ошибку в Chrome.

 XMLHttpRequest cannot load https://localhost:44351/api/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:44352' is therefore not allowed access.
  

Я могу вызывать api из клиента Postman.
Какие-либо шаги, которые я пропустил в этом? Пожалуйста, помогите.

Исправления, которые я сделал для этого:

В файле WebAPI project web.config

 <system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://localhost:xxxxx" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
    <add name="Access-Control-Allow-Credentials" value="true" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>
...
  

В StartUp.cs

 public void ConfigureServices(IServiceCollection services)
{
 services.AddCors();
//  services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{  app.UseCors(builder =>
        builder
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials()
        );}
  

Chrome не позволил мне использовать * в Access-Control-Allow-Origin поле.

Также добавлено "Microsoft.AspNetCore.Cors": "1.0.0" в project.json

Спасибо всем за помощь. Я действительно новичок в этом.

Комментарии:

1. копирование и отображение заголовков из запроса и ответа

2. Я смог преодолеть проблему, подробности см. в разделе Правки.

Ответ №1:

Если вы хотите включить CORS на стороне ядра web api, выполните следующие действия-

Сначала добавьте зависимость в project.json — "Microsoft.AspNetCore.Cors": "1.0.0",

затем включите CORS следующим startup.cs образом-

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

В случае, если вы хотите ограничить конкретное происхождение, вы можете сделать это следующим образом-

 app.UseCors(builder => builder.WithOrigins("example.com"));
  

Вы можете найти более подробную информацию о CORS здесь

Посмотрите, поможет ли это.

Ответ №2:

В вашем методе Configure вы забыли разрешить какие-либо методы, поэтому запрос POST не удался. Ваш метод настройки должен выглядеть следующим образом :

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
       ..
        app.UseCors(builder =>
        builder.WithOrigins("https://localhost:44352/")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        );
      ..
 }
  

И вы забыли отправить учетные данные, если вы этого не сделаете, и если вы используете cookie-файлы подтверждения или anti XHRF, они не будут отправлены :

 var request = $http({
    method: "post",
    url: serviceBase   "api/token",
    data:
        {
            username: "DemoUser",
            password: "Password"
        },
    withCredentials: true
    }
});
  

Ответ №3:

Вы должны поместить эти:

 headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods': 'GET, POST'
}
  

В ответе сервера, а не в запросе клиента